提醒：本文最後更新於 1947 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

最近組裡不少同學對 ES6 很有興趣，月影老大也給大家分享過有關 ES6 的話題。接下來，我也會嘗試使用 ES6 的一些新特性並記錄下來，內容不一定全面或精確。更全面的 ES6 介紹可以參考相應標準文件，或者MDN，或者有大量高質量 ES6 譯文及原創的優秀部落格紫雲飛。另外，「奇舞週刊」近期準備開闢譯文專欄，有興趣參與的同學請聯絡我。

廢話不多說，今天要介紹的是 ES6 中的箭頭函式（Arrow Function），目前只有 Firefox22+ 支援，本文示例需要在新版 Firefox 下才能正常工作。

定義

定義一個箭頭函式很簡單，基本語法是：

([param] [, param]) => {
   statements
}

param => expression

param 是引數，根據引數個數不同，分這幾種情況：

• () => { ... } // 零個引數用 () 表示；
• x => { ... } // 一個引數可以省略 ()；
• (x, y) => { ... } // 多引數不能省略 ()；

當然，和普通函式一樣，箭頭函式也可以使用 ES6 新增的「預設引數」和「剩餘引數」（ Firefox15+ 開始支援）：

var func1 = (x = 1, y = 2
 
) => x + y;
func1(); // 得到 3

var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 輸出 [2, 3]

箭頭函式允許多行語句或者單行表示式作為函式體。多行語句要用 {} 括起來；單行表示式不需要 {}，並且會作為函式返回值：

x => { return x * x }; // 函式返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 報錯，不能省略 {}
x => { x * x }; // 合法，沒有定義返回值，返回 undefined
 

箭頭函式也是 JS 函式的一種，所以之前的 instanceof 和 typeof 依然可用：

var func1 = () => {};
func1 instanceof Function; // true

var func2 = () => {};
typeof func2; // "function"

特性

Nicholas C. Zakas 的部落格中指出了箭頭函式的幾個特性：不能被 new 、this 被繫結為函式定義時的 this 且無法改變、不支援 arguments 。對於最後一點，我在 Firefox24 測試發現，arguments 可以正常工作。不知道是標準有變化，還是 Firefox 的實現有偏差，我們來看前兩個特性。

箭頭函式內部沒有 constructor 方法，也沒有 prototype，所以不支援 new 操作。new (() => {}) 會觸發 TypeError 報錯。

JS 裡的 this 指標一直是新手很頭疼的事情，看一個簡單的例子：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

上面程式碼得不到預期結果，因為 this 發生了改變，這個問題可以這樣修正：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func(); 
        }, 100);
    }
};

o.test();

在函式內部使用外部事先儲存的 this 就沒問題了。也可以改用 ES5 引入的 bind 方法：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func(); 
        }.bind(this), 100);
    }
};

o.test();

而有了箭頭函式，像下面這樣寫就可以了：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

箭頭函式的 this 始終指向函式定義時的 this，而非執行時。下面看一個嘗試改變箭頭函式 this 指標的例子：

var x = 1,
    o = {
        x : 10,
        test : () => this.x
    };

o.test(); // 1
o.test.call(o); // 依然是1

CoffeeScript

實際上，CoffeeScript 一直就支援用這種 =>（胖箭頭）定義函式；同時 CoffeeScript 還支援用 ->（瘦箭頭）定義函式。二者的區別是胖箭頭會繫結 this，瘦箭頭不會，來看一個例子，以下是 Coffee 程式碼：

this.clickHandler = -> alert "clicked"
el1.addEventListener "click", (e) => this.clickHandler(e)
el2.addEventListener "click", (e) -> this.clickHandler(e)

編譯後的 JS 程式碼是這樣的：

var _this = this;

this.clickHandler = function() {
  return alert("clicked");
};

el1.addEventListener("click", function(e) {
  return _this.clickHandler(e);
});

el2.addEventListener("click", function(e) {
  return this.clickHandler(e);
});

可以看到，使用胖箭頭的 el1 繫結的 click 函式的 this 指向函式定義時的 this；而 el2 的 click 函式的 this 指向執行時的元素本身。

JS 的箭頭函式沒看到有瘦箭頭的形式。

效能

關於箭頭函式的效能，我不想花精力去研究。一方面 ES6 標準並沒有完全確定，另一方面現在只有 Firefox 一家支援箭頭函式，對比意義不大。jsPref 上有個相關的測試，大家可以點過去看看。從已有的結果來看，箭頭函式與 bind 函式對比，效能差別不大；尤其是在 Firefox25 上，箭頭函式已經比 bind 快了。

參考：

--EOF--

提醒：本文最後更新於 1947 天前，文中所描述的資訊可能已發生改變，請謹慎使用。