ES6学习笔记-箭头函数 Arrow Functions
箭头函数的语法
// ES5
var selected = numbers.filter(function(number) {
return number.isSelected();
});
// ES6
let selected = numbers.filter(number => number.isSelected());
箭头函数的语法就是 标示符 => 表达式
,无需输入 function
return
等,省略了一些括号
- 多个参数
// ES5
var sum = numbers.reduce(function(a, b) {
return a + b;
}, 0);
// ES6
let sum = number.reduce((a, b) => a + b, 0);
- 包含一个语句块
// ES5
$('#button').click(function(event) {
prepare();
doSomeJob();
});
// ES6
$('#button').click(event => {
prepare();
doSomeJob();
});
包含一个语句块的箭头函数不会自动返回值,若需要则手动添加
return
语句
- 用箭头函数创建普通对象需要小心
// error
let newNumber = numbers.map(number => {});
// correct
let newNumber = numbers.map(number => ({}));
小窍门:所有对象字面量用小括号包裹以避免歧义
this 值
箭头函数没有自己的 this 值,箭头函数内的 this 值继承自外作用域
在 ES6 中需要遵循的规则
- 通过
object.method()
语法调用的方法使用非箭头函数定义,这些函数需要从调用者的作用域中获取一个有意义的 this 值 - 其他情况全部使用箭头函数
{
...
addAll: function addAll(pieces) {
_.each(numbers, number => this.add(number));
}
...
}
这里的 this 是 addAll 方法从它的调用者处获取的,内部函数是一个箭头函数,所以 this 不变
上面的代码还可以简化:
{
...
addAll(pieces) {
_.each(numbers, number => this.add(number));
}
...
}