快捷導(dǎo)航

ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細介紹

更新時間：2014年06月07日 10:33:00 作者：

這篇文章主要介紹了ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細介紹,ECMAScript6其實就是JavaScript,它的新特性就是JS的新特性,引入只是時間問題,需要的朋友可以參考下

箭頭函數(shù)是ECMAScript 6最受關(guān)注的更新內(nèi)容之一。它引入了一種用「箭頭」（=>）來定義函數(shù)的新語法，它…它碉堡了~。箭頭函數(shù)與傳統(tǒng)的JavaScript函數(shù)主要區(qū)別在于以下幾點：
1.對 this 的關(guān)聯(lián)。函數(shù)內(nèi)置 this 的值，取決于箭頭函數(shù)在哪兒定義，而非箭頭函數(shù)執(zhí)行的上下文環(huán)境。
2.new 不可用。箭頭函數(shù)不能使用 new 關(guān)鍵字來實例化對象，不然會報錯。
3.this 不可變。函數(shù)內(nèi)置 this 不可變，在函數(shù)體內(nèi)整個執(zhí)行環(huán)境中為常量。
4.沒有arguments對象。更不能通過arguments對象訪問傳入?yún)?shù)。只能使用顯式命名或其他ES6新特性來完成。

這些差異的存在是有理可循的。首先，對this的綁定是JavaScript錯誤的常見來源之一。容易丟失函數(shù)內(nèi)置數(shù)值，或得出意外結(jié)果。其次，將箭頭函數(shù)限制為使用固定this引用，有利于JavaScript引擎優(yōu)化處理。

一、語法

箭頭函數(shù)的語法很簡單，定義自變量，然后是箭頭和函數(shù)主體。自變量和主題因使用不同可以采用更簡潔的格式。下面這個例子就是采用傳一個參數(shù)和返回一個值的箭頭函數(shù)。

復(fù)制代碼代碼如下:

var reflect = value => value;
// 等同于：

var reflect = function(value) {
    return value;
};

可以看出，傳一個參數(shù)就直接寫就好了，不用加小括號。箭頭指向函數(shù)主體，不過函數(shù)主體也只是簡單的一條返回語句，所以也不用加大括號。函數(shù)構(gòu)造完畢賦給reflect加以引用。
若需傳入多個參數(shù)，則應(yīng)加上小括號。例如：

復(fù)制代碼代碼如下:

var sum = (num1, num2) => num1 + num2;
// 等同于：
var sum = function(num1, num2) {
    return num1 + num2;
 };

sum()方法為兩參數(shù)相加并回傳結(jié)果。跟前一個例子的唯一區(qū)別是傳入了兩個參數(shù)，所以要用小括號括起來。它與傳統(tǒng)函數(shù)一樣，括號內(nèi)由逗號將傳入?yún)?shù)分開。同樣，如果該函數(shù)不需要傳入?yún)?shù)，那也要以空括號來代替。

復(fù)制代碼代碼如下:

var sum = () => 1 + 2;
// 等同于：
var sum = function() {
    return 1 + 2;
 };

若你想使用標(biāo)準(zhǔn)的函數(shù)體，或者函數(shù)體內(nèi)可能有更多的語句要執(zhí)行，則要用大括號將函數(shù)體括起來，并明確定義返回值。例如：

復(fù)制代碼代碼如下:

var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {
    return num1 + num2;
 };

大括號內(nèi)的部分基本等同于傳統(tǒng)函數(shù)，除了arguments參數(shù)不可用外。
因為大括號是函數(shù)主體的標(biāo)志。而箭頭函數(shù)若要返回自定義對象的話，就必須用小括號把該對象括起來先。例如：

復(fù)制代碼代碼如下:

var getTempItem = id = > ({
    id: id,
    name: "Temp"
});
// 等同于：
var getTempItem = function(id) {
    return {
        id: id,
        name: "Temp"
    };
};

上例可以看出，用小括號包含大括號則是對象的定義，而非函數(shù)主體。

二、使用

JavaScript最常見錯誤之一就是函數(shù)內(nèi)部this關(guān)聯(lián)。因為this是根據(jù)函數(shù)當(dāng)前的執(zhí)行環(huán)境去取值的，這樣就會在調(diào)用時產(chǎn)生誤解，以導(dǎo)致對其他的不相關(guān)對象產(chǎn)生了影響。參見下例：

復(fù)制代碼代碼如下:

var PageHandler = {
    id: "123456",
    init: function() {
        document.addEventListener("click", function(event) {
            this.doSomething(event.type); // error
        }, false);
    },
    doSomething: function(type) {
        console.log("Handling " + type + " for " + this.id);
    }
};

在這段代碼中，本意是想讓PageHandler的init()方法用于構(gòu)建交互作用，并在點擊事件處理函數(shù)中調(diào)用this.doSomething()。但是代碼并未按設(shè)計初衷來執(zhí)行，運行時this指向了全局對象而不是PageHandler，從而造成this.doSomething()調(diào)用無效出現(xiàn)報錯，因為全局對象中不存在doSomething方法。
當(dāng)然，可以在函數(shù)中使用bind()將this與PageHandler明確關(guān)聯(lián)起來，見下：

復(fù)制代碼代碼如下:

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", (function(event) {
            this.doSomething(event.type);
        }).bind(this), false);
    },

    doSomething: function(type) {
        console.log("Handling " + type + " for " + this.id);
    }
};

雖然看著有些怪，但現(xiàn)在代碼執(zhí)行是符合預(yù)期的。通過調(diào)用函數(shù)的bind(this)，又創(chuàng)建了一個已關(guān)聯(lián)現(xiàn)有this的新函數(shù)返回，就是說為了達到目的額外又包了一層。
因為箭頭函數(shù)已經(jīng)支持this關(guān)聯(lián)，所以這里用箭頭函數(shù)會更爽快些，看下例：

復(fù)制代碼代碼如下:

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click",
        event = > this.doSomething(event.type), false);
    },

    doSomething: function(type) {
        console.log("Handling " + type + " for " + this.id);
    }
};

這個實例中的事件處理函數(shù)調(diào)用了this.doSomething()的箭頭函數(shù)。this的取值即為init()內(nèi)的this值。故而它等效于bind()。
箭頭函數(shù)簡明扼要的特性，也使它成為其他函數(shù)自變量的理想選擇。例如，若要在ES5上，使用定制比較器來排列數(shù)組，典型的代碼見下：

復(fù)制代碼代碼如下:

var result = values.sort(function(a, b) {
        return a - b;
 });

上例用了許多語法來實現(xiàn)一個簡單的操作。若使用箭頭函數(shù)，則可寫成很精煉的代碼：

復(fù)制代碼代碼如下:

var result = values.sort((a, b) => a - b);

數(shù)組的sort/map/reduce等方法都支持回調(diào)函數(shù)。用箭頭函數(shù)可以簡化書寫流程，解放你的雙手去做你想做的事情。

三、補充

箭頭函數(shù)的確與傳統(tǒng)函數(shù)有不同之處，但仍存在共同的特點。例如：
1.對箭頭函數(shù)進行typeof操作會返回“function”。
2.箭頭函數(shù)仍是Function的實例，故而instanceof的執(zhí)行方式與傳統(tǒng)函數(shù)一致。
3.call/apply/bind方法仍適用于箭頭函數(shù)，但就算調(diào)用這些方法擴充當(dāng)前作用域，this也依舊不會變化。
箭頭函數(shù)與傳統(tǒng)函數(shù)最大的不同之處在，禁用new操作。

四、結(jié)論

箭頭函數(shù)是ECMAScript 6一個備受關(guān)注的新特性，并且還在不斷的優(yōu)化著。用簡短語法以定義函數(shù)或語句書寫流程是大勢所趨，他們必將屌炸天，無人可阻。它對關(guān)鍵字this的關(guān)聯(lián)讓開發(fā)者不再神煩，并通過JavaScript引擎優(yōu)化，幫助其提高表現(xiàn)。說到這里，小伙伴們的大刀已經(jīng)饑渴難耐了吧，若想試用箭頭函數(shù)，打開最新版本的Firefox即可。

您可能感興趣的文章: