箭头函数的语法

// 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));
  }
  ...
}