JavaScript 箭头函数的特点、与普通函数的区别
作者:火星飞鸟 发布时间:2024-05-02 17:30:45
1. 箭头函数的使用
ES6 中新增了使用箭头=>
来定义函数表达式的方法。很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同。
本文第二块内容将介绍箭头函数和普通函数功能上的区别。
1. 普通函数到箭头函数
如下所示,定义一个函数,可以使用function
关键字,函数接收两个参数a
和b
,返回a
和b
的和。
function getSum(a, b) {
return a + b;
}
若使用箭头函数来定义这个函数,可以写成如下形式,省略function
关键字,用箭头=>
定义一个函数。
const getSum = (a, b) => {
return a + b;
};
2. 省略大括号和 return
若定义的箭头函数,函数体内只有return
语句,则可以省略大括号{}
和return
。
如下所示,定义的箭头函数,完整写法。
const getSum = (a, b) => {
return a + b;
};
此箭头函数的函数体内只有return
语句,那么,省略了大括号{}
和return
后的精简写法如下:
const getSum = (a, b) => a + b;
3. 省略小括号
若定义的箭头函数,参数只有一个,则可以省略小括号。
如下所示,定义的箭头函数,只有一个参数,完整写法。
const func = (a) => {
return a + 2;
};
省略了参数旁边的小括号,以下代码等价于上面的代码。
const func = a => a + 2;
注意:若函数没有参数,或者多个参数的情况下,必须要使用括号。
2. 箭头函数与普通函数的区别
大多数情况下,能使用普通函数的地方都可以用箭头函数代替,因为箭头函数更精简。
但在部分情况下,箭头函数与普通函数有着很大的却别。
1. 箭头函数的 this 是父级作用域的 this
如下代码,定义了一个对象obj
,对象中有个普通函数定义的方法getThis
,打印出此处的this
。调用obj.getThis()
,会打印出obj
对象。这说明方法内部的this
指向对象obj
。
const obj = {
name: 'Jack',
getThis() {
console.log(this);
},
};
obj.getThis(); // {name: 'Jack', getThis: ƒ}
同样定义一个对象obj
,但里面的方法用箭头函数定义,浏览器中调用obj.getThis()
却打印出Window
,这说明即使调用obj
对象身上的方法,方法内部的this
也不会指向obj
,而是指向定义obj
的上下文的this
。
const obj = {
name: 'Jack',
getThis: () => {
console.log(this);
},
};
obj.getThis(); // Window
2. call、apply、bind无法改变箭头函数的 this
如下代码,普通函数getName
打印this.name
,通过call
将函数中的this
绑定到obj
身上,调用getName
打印出obj
身上的属性name
。
const obj = {
name: 'Jack',
};
function getName() {
console.log(this.name);
}
getName.call(obj); // Jack
若将函数改成箭头函数,那么call
将不起作用,无法将函数内部的this
绑定到obj
,打印出undefined
。
const obj = {
name: 'Jack',
};
const getName = () => {
console.log(this.name);
};
getName.call(obj); // undefined
3. 不可以作为构造函数
箭头函数不可以作为构造函数使用,若将箭头函数作为构造函数,将报错,如下代码所示。
const Person = () => {
this.name = 'Jack';
};
const usr = new Person(); // Person is not a constructor
4. 不可以使用 arguments
在普通函数内部,可以使用arguments
来获取传入的参数,是一个类数组对象:
function func() {
console.log(arguments);
}
func(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
而箭头函数就不可以使用arguments
对象,获取不到输入的参数。
在浏览器中,若在箭头函数使用arguments
对象,将报错。
const func = () => {
// 浏览器环境
console.log(arguments); // arguments is not defined
};
func(1, 2, 3);
但是箭头函数可以在参数内,以...args
的方式,获取到输入的参数,得到的args
是一个数组。
const func = (...args) => {
console.log(args); // [ 1, 2, 3 ]
};
func(1, 2, 3);
5. 箭头函数不支持 new.target
普通函数定义的构造函数内部,支持使用new.target
,返回构造实例的构造函数。
function Person() {
this.name = 'Jack';
console.log(new.target);
}
// 指向构造函数
new Person(); // [Function: Person]
而在箭头函数中,不支持使用new.target
。在浏览器环境中,箭头函数使用new.target
将报错:new.target expression is not allowed here
。
const Person=() =>{
this.name = 'Jack';
console.log(new.target);
}
// 浏览器环境
new Person(); // new.target expression is not allowed here
本文参考:
《JavaScript高级程序设计(第4版)》
来源:https://blog.csdn.net/Jack_lzx/article/details/121054784
猜你喜欢
- Windowns操作系统中安装Python,供大家参考,具体内容如下一.下载Python1.python 官网 下载安装包2.选择
- Python是数据分析的强大利器利用Python做数据分析,第一步就是学习如何读取日常工作中产生各种excel报表并存入数据中,方便后续数据
- php代码实现读取文件头判断文件类型,支持图片、rar、exe等后缀。案例:<?php $filename = "11.jp
- 使用邻接矩阵实现图及Dijkstra算法# 邻接矩阵实现无向图 Dijkstra算法inf = float("inf")
- 如下所示:distances = np.sqrt(np.sum(np.asarray(airportPosition - x_vals)**
- import osfrom PIL import Image#批量剪切目录下图片for j in range(10,121): &
- Matplotlib效果图如下主要使用matplotlib.animation.FuncAnimation,上核心代码,# 定义静态绘图函数
- 首先给大家分享一个个人在使用python的ctypes调用c库的时候遇到的一个小坑这次出问题的地方是一个C函数,返回值是malloc生成的字
- SQL Server 2005的新功能为动态管理对象,它们是在指定时间返回某个数据库实例的特殊状态信息的数据库视图或函数。这些对象允许数据库
- 前言之前接触到的数据库死锁,都是批量更新时加锁顺序不一致而导致的死锁,但是上周却遇到了一个很难理解的死锁。借着这个机会又重新学习了一下mys
- 图片数据一般有两种情况:1、所有图片放在一个文件夹内,另外有一个txt文件显示标签。2、不同类别的图片放在不同的文件夹内,文件夹就是图片的类
- pop()函数1、描述pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值。语法pop()方法语法:list.p
- Pandas之drop_duplicates:去除重复项方法DataFrame.drop_duplicates(subset=None, k
- 本文实例为大家分享了python3.5基于TCP实现文件传输的具体代码,供大家参考,具体内容如下服务器代码# _*_ coding:utf-
- 本文实例讲述了python自动化测试之setUp与tearDown的用法,分享给大家供大家参考。具体如下:实例代码如下:class Roma
- 1、golang中获取请求接口中数据(GET)方式一: API参数 ctx.Param(name string)或者ctx.Params.B
- domainname.asp<form method="POST"> &nb
- 前言在使用echarts绘图时可能遇到一些特别的需求,如,当x周表示日期且数据较多(如三个月,按天统计),此时如果按照echarts的默认配
- 0.配置依赖环境,如果不进行这步可能会出现一些问题中间可能有多余空格,去除下再运行,一般都能安装成功,如果不能可以先更新下sudo apt-
- 一旦你创建一个 Template 对象,你可以用 context 来传递数据给它。 一个context是一系列变量和它们值的集合。conte