ES6學習筆記之箭頭函數

本文同步自我得博客：http://www.joeray61.com

JS中的箭頭

箭頭在JS裏並不算是個新鮮的玩意兒，一直以來，JS都支持-->這樣的箭頭。

很早的時候有些瀏覽器還不支持JS，當時的人們爲了兼容這些瀏覽器，須要這樣寫JS:

<script language="javascript">
<!--
    alert('Joe');
// -->
</script>

這段代碼在不支持JS的瀏覽器裏會被解讀成2個未知標籤和一段html註釋。在支持JS的瀏覽器裏，JS引擎會把<!--和-->當作是單行註釋的開始。須要說明的是，-->僅僅是在一行的開頭才能表示這一行是註釋，其他狀況-->是一個操做符，表示goes to的含義。

function countdown(n) {
    while (n --> 0) {
        alert(n);
    }
}

這段代碼確實可以正常運行哦。當你給countdown函數傳入一個大於0的參數時，這個循環可以一直運行，直到n變爲0爲止。

此箭頭非彼箭頭，以上講述的-->並非咱們今天要講的主角，你們權當拓展下JS知識，下面讓咱們進入正題。

特性介紹

箭頭函數是ES6新增的特性之一，它爲JS這門語言提供了一種全新的書寫函數的語法。

// ES5
var double = nums.map(function (v) {
    return 2 * n;
});

// ES6
var double = nums.map(v => 2 * n);

箭頭函數簡化了原先的函數語法，不須要再寫function，若是函數體只有一行代碼的話連return都不用寫，這個特性對於熱衷於簡化流程和工做的程序員來講至關對胃口。

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

函數體

箭頭函數支持兩種模式的函數體寫法，咱們姑且叫他簡潔函數體和塊級函數體。

// 簡潔函數體
var fn = x => x * x;

// 塊級函數體
var fn = (x, y) => {return x + y;};

簡介函數體默認會把表達式的結果返回，塊級函數體須要手動return。若是想要返回一個對象又想使用簡潔函數體的話，須要這麼寫：

var fn = () => ({});
fn();   // {}

若是寫成var fn = () => {};，那麼執行fn()只能返回undefined。

this

用function生成的函數會定義一個本身的this，而箭頭函數沒有本身的this，而是會和上一層的做用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

這段代碼裏，setTimeout的參數function中須要操做外層的age屬性，必需要把this賦值給self，而後經過self來獲取到age

若是使用箭頭函數則省事不少，代碼以下：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

apply & call

因爲箭頭函數已經綁定了this的值，即便使用apply或者call也不能只能起到傳參數的做用，並不能強行改變箭頭函數裏的this。

var adder = {
    x: 1,
    add1: function (y) {
        var fn = v => v + this.x;
        return fn(y);
    },
    add2: function (y) {
        var fn = v => v + this.x;
        var whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};

adder.add1(1);    // 2
adder.add2(1);    // 仍然是2

arguments

普通函數裏arguments表明了調用時傳入的參數，可是箭頭函數否則，在箭頭函數中沒法使用arguments

固然，ES6中也有辦法可讓箭頭函數像普通函數同樣使用相似於arguments這樣的類數組對象

var fn = (...rest) => rest[0];
fn(2);    // 2

...rest也是ES6的一個新特性，以後會介紹。

不能被new

箭頭函數不能與new關鍵字一塊兒使用，會報錯

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error

使用場景

在我看來，箭頭函數幾乎能夠徹底取代function，除非是函數須要進行遞歸或者須要可變的this對象，其餘場景我認爲均可以使用箭頭函數。

參考資料

• ES6 In Depth: Arrow functions

• Arrow functions