JavaScript中的this绑定丢失及解决方法

经常犯的错误：混淆了this绑定规则。

代码如下：

var obj = {
  id: 'vexekefo',
  cool() {
    console.log(this.id);
  }
};
var id = 'someone';
obj.cool();  // vexekefo

setTimeout(obj.cool, 100); // someone

为什么是这种输出结果？

setTimeout内置函数让this绑定丢失了，不再是obj对象中的id值。因此输出全局作用域下的id值而不是obj.id。

2种解决方法：箭头函数和bind()

箭头函数的原理是：用当前的词法作用域覆盖了this 本来的值。

bind则是：函数的this被bind的第一个参数指定。

// 箭头函数
var obj = {
  id: 'vexekefo',
  cool() {
    console.log(this.id);
  }
};
var id = 'someone';

obj.cool();
setTimeout(() => {obj.cool()}, 100);

// bind()
var obj = {
  id: 'vexekefo',
  cool: function(){
    console.log(this.id);
  }
};
var id = 'someone';

obj.cool();
setTimeout(obj.cool.bind(obj), 100);