箭頭函數

1.ES6的做箭頭函數書寫方式：

var foo = a => {
  console.log( a );
};
foo( 2 ); // 2

這裏稱做「胖箭頭」，一般被看成function 關鍵字的簡寫。

2.箭頭函數有重要的做用(解決this做用域問題)，比較下面函數：

var obj = {
    id: "a",
    cool: function coolFn() {
        console.log( this.id );
    }
};
var id = "b"
obj.cool(); // a
setTimeout( obj.cool, 100 ); // b

問題在於cool() 函數丟失了同this 之間的綁定。（最好的解決方法也是最經常使用的解決方法是var self = this）
以下：

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;
        if (self.count < 1) {
            setTimeout( function timer(){
                self.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a
(self 只是一個能夠經過詞法做用域和閉包進行引用的標識符，不關心this 綁定的過程當中發生了什麼。)


ES6 中的箭頭函數引入了一個叫做this 詞法的行爲：

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( () => { 
                this.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a

總結：

簡單來講，箭頭函數在涉及this 綁定時的行爲和普通函數的行爲徹底不一致。它放棄了全部普通this 綁定的規則，取而代之的是用當前的詞法做用域覆蓋了this 原本的值。所以，這個代碼片斷中的箭頭函數並不是是以某種不可預測的方式同所屬的this 進行了解綁定，而只是「繼承」了cool() 函數的this 綁定（所以調用它並不會出錯）。箭頭函數的綁定沒法被修改。（new 也不行！ ）

解決的另外一個辦法：bind（）；

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( function timer(){
                this.count++; // this 是安全的， 由於bind(..)
                console.log( "a" );
            }.bind( this ), 100 ); 
        }
    }
};
obj.cool();//a

最後：不管你是喜歡箭頭函數中this 詞法的新行爲模式，仍是喜歡更靠得住的bind()，都須要注意箭頭函數不單單意味着能夠少寫代碼。它們之間有意爲之的不一樣行爲須要咱們理解和掌握，才能正確地使用它們。