ES6，箭头函数解决this作用域问题

ES6 添加了一个特殊的语法形式用于函数声明，叫作箭头函数。它看起来是下面这样的：
var foo = a => {
  console.log( a );
};
foo( 2 ); // 2

这里称作“胖箭头”，通常被当作function 关键字的简写。

箭头函数有重要的作用，比较下面函数：

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