箭頭函數

箭頭函數無疑是 ES6 中一個相當重要的新特性。

特性

1、共享父級 this 對象
2、共享父級 arguments
3、不能當做構造函數

語法

最簡表達式
var arr = [1, 2, 3, 4, 5, 6];
// Before
arr.filter(function(v) {
    return v > 3;
});
// After
arr.filter(v => v > 3); // => [4, 5, 6]
//前后對比很容易理解，可以明顯看出箭頭函數極大地減少了代碼量。

完整語法

var arr = [1, 2, 3, 4, 5, 6];

arr.map((v, k, thisArr) => {
    return thisArr.reverse()[k] * v;
})  // => [6, 10, 12, 12, 10, 6]
　　一個簡單的首尾相乘的算法，對比最簡表達式我們可以發現，函數的前邊都省略了 function 關鍵字，但是多個入參時需用括號包裹入參，單個入參是時可省略括號，入參寫法保持一致。后面使用胖箭頭 => 連接函數名與函數體，函數體的寫法保持不變。

函數上下文 this

// Before
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var that = this,
            getMax = function() {
                return Math.max.apply({}, that.arr);
            };
        
        return Math.pow(getMax(), 2);
    }
}
// After
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var getMax = () => {
            return Math.max.apply({}, this.arr);
        }

        return Math.pow(getMax(), 2);
    }
}

注意看中第 5 行 var that = this 這里聲明的一個臨時變量 that。在對象或者原型鏈中，我們以前經常會寫這樣一個臨時變量，或 that 或 _this，諸如此類，以達到在一個函數內部訪問到父級或者祖先級 this 對象的目的。

如今在箭頭函數中，函數體內部沒有自己的 this，默認在其內部調用 this 的時候，會自動查找其父級上下文的 this 對象（如果父級同樣是箭頭函數，則會按照作用域鏈繼續向上查找），這無疑方便了許多，我們無需在多余地聲明一個臨時變量來做這件事了。

注意：某些情況下我們可能需要函數有自己的 this，例如 DOM 事件綁定時事件回調函數中，我們往往需要使用 this 來操作當前的 DOM，這時候就需要使用傳統匿名函數而非箭頭函數。
在嚴格模式下，如果箭頭函數的上層函數均為箭頭函數，那么 this 對象將不可用。
另，由于箭頭函數沒有自己的 this 對象，所以箭頭函數不能當做構造函數。
父級函數 arguments

我們知道在函數體中有 arguments 這樣一個偽數組對象，該對象中包含該函數所有的入參（顯示入參 + 隱式入參），當函數體中有另外一個函數，并且該函數為箭頭函數時，該箭頭函數的函數體中可以直接訪問父級函數的 arguments 對象。

function getSum() {
    var example = () => {
        return Array
            .prototype
            .reduce
            .call(arguments, (pre, cur) => pre + cur);
    }

    return example();
}
getSum(1, 2, 3); // => 6

由于箭頭函數本身沒有 arguments 對象，所以如果他的上層函數都是箭頭函數的話，那么 arguments 對象將不可用。

當箭頭函數入參只有一個時可以省略入參括號；
當入參多余一個或沒有入參時必須寫括號；
當函數體只有一個 return 語句時可以省略函數體的花括號與 return 關鍵字。