箭頭函數 ES6

ES6標準新增了一種新的函數：Arrow Function（箭頭函數）。

爲何叫Arrow Function？由於它的定義用的就是一個箭頭：

x => x * x 

上面的箭頭函數至關於：

function (x) { return x * x; } 

在繼續學習箭頭函數以前，請測試你的瀏覽器是否支持ES6的Arrow Function：

'use strict';

alert('你的瀏覽器支持ES6的Arrow Function!');

 Run

箭頭函數至關於匿名函數，而且簡化了函數定義。箭頭函數有兩種格式，一種像上面的，只包含一個表達式，連{ ... }和return都省略掉了。還有一種能夠包含多條語句，這時候就不能省略{ ... }和return：

x => {
    if (x > 0) { return x * x; } else { return - x * x; } } 

若是參數不是一個，就須要用括號()括起來：

// 兩個參數: (x, y) => x * x + y * y // 無參數: () => 3.14 // 可變參數: (x, y, ...rest) => { var i, sum = x + y; for (i=0; i<rest.length; i++) { sum += rest[i]; } return sum; } 

若是要返回一個對象，就要注意，若是是單表達式，這麼寫的話會報錯：

// SyntaxError: x => { foo: x } 

由於和函數體的{ ... }有語法衝突，因此要改成：

// ok: x => ({ foo: x }) 

this

箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法做用域，由上下文肯定。

回顧前面的例子，因爲JavaScript函數對this綁定的錯誤處理，下面的例子沒法獲得預期結果：

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = function () { return new Date().getFullYear() - this.birth; // this指向window或undefined }; return fn(); } }; 

如今，箭頭函數徹底修復了this的指向，this老是指向詞法做用域，也就是外層調用者obj：

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象 return fn(); } }; obj.getAge(); // 25 

若是使用箭頭函數，之前的那種hack寫法：

var that = this; 

就再也不須要了。

因爲this在箭頭函數中已經按照詞法做用域綁定了，因此，用call()或者apply()調用箭頭函數時，沒法對this進行綁定，即傳入的第一個參數被忽略：

var obj = { birth: 1990, getAge: function (year) { var b = this.birth; // 1990 var fn = (y) => y - this.birth; // this.birth還是1990 return fn.call({birth:2000}, year); } }; obj.getAge(2015); // 25