JS箭头函数

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

更短的函数

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

没有单独的this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的 this 值：

• 如果该函数是一个构造函数，this 指针指向一个新的对象
• 在严格模式下的函数调用下，this 指向undefined
• 如果该函数是一个对象的方法，则它的 this 指针指向这个对象
• 等等

This被证明是令人厌烦的面向对象风格的编程。