前言
箭头函数是ES6
中新增的特性,因其在语言上的简洁性,相信很多人都非常喜欢使用它。对于初学者来说,对于箭头函数的熟练使用与深刻理解需要一个过程。本文总结一下普通函数与箭头函数的区别,希望能够使这一过程加速。
基本语法
ES6
允许使用“箭头”(=>
)定义函数。具体的定义,可以看下面的例子。
var f = v => v
// 等同于
var f = function (v) {
return v
}
可以看出,定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function
关键字,采用箭头=>
来定义函数。函数的参数放在=>
前面的括号中,函数体跟在=>
后的花括号中。
箭头函数的参数
1、如果箭头函数没有参数,直接写一个空括号即可。
var f = () => 5
// 等同于
var f = function () { return 5 }
2、如果箭头函数的参数只有一个,也可以省去包裹参数的括号。
var f = v => v
// 等同于
var f = function (v) {
return v
}
3、如果箭头函数有多个参数,将参数依次用逗号(,)
分隔,包裹在括号中即可。
var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
return num1 + num2
}
箭头函数的函数体
1、如果箭头函数的函数体只有一句代码,就是简单返回某个变量或者返回一个简单的JS表达式,可以省去函数体的大括号{ }
。
var f = v => v
2、如果箭头函数的函数体只有一句代码,就是返回一个对象,要使用()
// 用小括号包裹要返回的对象,不报错
let getTempItem = id => ({ id: id, name: "Temp" });
// 但绝不能这样写,会报错。
// 因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };
3、如果箭头函数的函数体只有一条语句并且不需要返回值(最常见是调用一个函数),可以给这条语句前面加一个void
关键字
let fn = () => void doesNotReturn()
箭头函数实际使用场景
1、箭头函数可以与变量解构结合使用。可以用在请求接口时,只接受的返回数据中需要的字段。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
2、箭头函数可以简化回调函数。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
3、rest
参数与箭头函数结合简化开发。
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
箭头函数与普通函数的区别
箭头函数中的this指向
1、箭头函数没有原型prototype
let a = () =>{};
console.log(a.prototype); // undefined
2、箭头函数不会创建自己的this
箭头函数不会创建自己的this
,所以它没有自己的this
,它只会从自己的作用域链的上一层继承this
。
箭头函数没有自己的this
,它会捕获自己在定义时(注意,是定义时,不是调用时)所处的外层执行环境的this
,并继承这个this
值。所以,箭头函数中this
的指向在它被定义的时候就已经确定了,之后永远不会改变。
var id = 'Global';
function fun1() {
// setTimeout中使用普通函数
setTimeout(function(){
console.log(this.id);
}, 2000);
}
function fun2() {
// setTimeout中使用箭头函数
setTimeout(() => {
console.log(this.id);
}, 2000)
}
fun1.call({id: 'Obj'}); // 'Global'
fun2.call({id: 'Obj'}); // 'Obj'
3、不能修改箭头函数的this
指向
由于箭头函数的this
定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this
的指向,虽然这么做代码不会报错。
var id = 'Global';
// 箭头函数定义在全局作用域
let fun1 = () => {
console.log(this.id)
};
fun1(); // 'Global'
// this的指向不会改变,永远指向Window对象
fun1.call({id: 'Obj'}); // 'Global'
fun1.apply({id: 'Obj'}); // 'Global'
fun1.bind({id: 'Obj'})(); // 'Global'
4、箭头函数不能作为构造函数使用
我们先了解普通函数new构造函数的步骤:
-
JS
`内部首先会先生成一个对象。 - 再把函数中的
this
指向该对象。 - 然后执行构造函数中的语句。
- 最后隐式的返回
this
。
但是箭头函数没有自己的this
,它的this
其实是继承了外层执行环境中的this
,且this
指向永远不会随在哪里调用、被谁调用而改变,所以箭头函数不能作为构造函数使用,或者说构造函数不能定义成箭头函数,否则用new
调用时会报错!
let Fun = (name, age) => {
this.name = name;
this.age = age;
};
// 报错
let p = new Fun('cao', 24)
5、箭头函数没有自己的arguments
箭头函数没有自己的arguments
对象。在箭头函数中访问arguments
实际上获得的是外层局部(函数)执行环境中的值。
除了arguments、this以下两个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:super、new.target。
(1) 箭头函数的this
指向全局对象,会报arguments
未声明的错误。
let b = () => {
console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
(2) 箭头函数的this
如果指向普通函数,它的argumens
继承于该普通函数。
function bar() {
console.log(arguments); // ['bar']
bb('bb');
function bb() {
console.log(arguments); // ["bb"]
let a = () => {
console.log(arguments); // ["bb"]
};
a('箭头函数的参数'); // this指向bb
}
}
bar('bar');
可以在箭头函数中使用rest参数代替arguments对象,来访问箭头函数的参数列表!!
rest参数获取参数列表
ES6
引入 rest
参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest
参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
let a = (a, ...bcd) => {
console.log(a, bcd); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
上面的例子除了第一个参数确定外,用一个变量接收其他的变量。当然你也可以使用一个变量接收所有的参数。
rest参数需要注意的点
1、rest
参数必须是最后一个参数,否则会报错。
// 报错
function f(a, ...b, c) {
// ...
}
2、rest
参数没有函数的length
属性。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
6、箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
function func1(a, a) {
console.log(a, arguments); // 2 [1,2]
}
var func2 = (a,a) => {
console.log(a); // 报错:在此上下文中不允许重复参数名称
};
func1(1, 2); func2(1, 2);
7、语法更加简洁、清晰
从上面的基本语法示例中可以看出,箭头函数的定义要比普通函数定义简洁、清晰得多,很快捷。
箭头函数的不适用场景
本段摘自阮一峰ES6入门了解详情可点击参考。
1、定义对象的方法,且该方法内部包括this。
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
上面代码中,cat.jumps()
方法是一个箭头函数,这是错误的。调用cat.jumps()
时,如果是普通函数,该方法内部的this
指向cat
;如果写成上面那样的箭头函数,使得this
指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致jumps
箭头函数定义时的作用域就是全局作用域。
2、需要动态this的时候,不应使用箭头函数。
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
上面代码运行时,点击按钮会报错,因为button
的监听函数是一个箭头函数,导致里面的this
就是全局对象。如果改成普通函数,this
就会动态指向被点击的按钮对象。
本章内容小结
### 箭头函数的使用
- 箭头函数可以与变量解构结合使用。可以用在请求接口时,只接受的返回数据中需要的字段。
- 箭头函数可以简化回调函数。
- 如果箭头函数有多个参数,将参数依次用逗号
(,)
分隔,包裹在括号中即可。
箭头函数与普通函数的区别
- 箭头函数没有原型
prototype
。 - 箭头函数不会创建自己的
this
。 - 不能修改箭头函数的
this
指向。 - 箭头函数不能作为构造函数使用。
- 箭头函数没有自己的
arguments
。(super、new.target
也没有)。 - 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名。
- 语法更加简洁、清晰。
箭头函数不适用场景
- 箭头函数的
this
意外指向和代码的可读性。
注意事项:
- 箭头函数一条语句返回对象字面量,需要加括号。
- 箭头函数在参数和箭头之间不能换行。
- 箭头函数的
rest
参数需要放在最后。
参考文章
总结
箭头函数是ES6重点知识了,不管是在面试上,还是在平时开发中,都是经常会被问道且使用到的知识。因此,我们应该系统的去掌握和深入理解它。希望还不是很熟练的童鞋要抓紧时间学习,它值得我们大家花时间去整理和总结。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。