箭头函数

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

---

基础语法

(参数1, 参数2, …, 参数N) => { 函数声明 }

例如：

var f = (num1, num2) => { 
    return num1*num2 
};

console.log(f(3, 4)); // 12

可以简写成：

(参数1, 参数2, …, 参数N) => 表达式（单一）

例如：

var f = (num1, num2) => num1*num2;

console.log(f(3, 4)); // 12

当只有一个参数时，圆括号是可省略的：

(单一参数) => {函数声明}
单一参数 => {函数声明}

例如：

var f = num => num*num;

console.log(f(3)); // 9

没有参数的函数应该写成一对圆括号：

() => {函数声明}

例如：

var f = () => 'hello world';

console.log(f()); // hello world

---

引入箭头函数有两个方面的作用：简化函数和不需要绑定 this。

简化函数

我们使用 map 方法一次输出一个数组各元素的长度，使用以下方法：

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

var f = materials.map(function(material) { 
    return material.length; 
  }); 

console.log(f) // [8, 6, 7, 9]

使用箭头函数简化：

var f = materials.map(material => {
    return material.length; 
});
    
console.log(f) // [8, 6, 7, 9]

进一步简化：

var f = materials.map(material =>  material.length);
    
console.log(f) // [8, 6, 7, 9]

---

不绑定 this

在 ECMAScript 3/5中，通过将 this 值分配给封闭的变量，可以解决 this 问题。

function Person() {
    this.age = 0;
  
    var self = this;
    setInterval(function growUp() {
      self.age++;
      console.log(self.age);
    }, 1000);
  }

var p = new Person();

使用箭头函数则不用绑定 this：

function Person() {
    this.age = 0;
  
    // var self = this;
    setInterval(() => {
      this.age++;
      console.log(this.age);
    }, 1000);
  }

var p = new Person();