箭头函数

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()，都需要注意箭头函数不仅仅意味着可以少写代码。它们之间有意为之的不同行为需要我们理解和掌握，才能正确地使用它们。