圖片來自簡書

es6全家桶（二）—— rest參數、箭頭函數

箭頭函數

ES6 允許使用“箭頭”（=>）定義函數。

var f = v => v;
上面的箭頭函數等同于：
var f = function(v) { return v; };

箭頭函數的一個用處是簡化回調函數。

// 正常函數寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數寫法
[1,2,3].map(x => x * x);

下面是 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]]
```

箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

（2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

（3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。

（4）不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

舉例：請問下面的代碼之中有幾個this？
``` javascript
function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
```
上面代碼之中，只有一個this，就是函數foo的this，所以t1、t2、t3都輸出同樣的結果。

因為所有的內層函數都是箭頭函數，都沒有自己的this，它們的this其實都是最外層foo函數的this。
除了this，以下三個變量在箭頭函數之中也是不存在的，指向外層函數的對應變量：arguments、super、new.target。
由于箭頭函數沒有自己的this，所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向。


```