js setTimeout里this的问题

Question

var obj={ 
id:"awesome",
cool:function coolFn(){
  console.log(this.id);
 }
};
obj.cool()//awesome
var id="not awesome";
setTimeout(obj.cool,1000.);//not awesome

为什么setTimeout输出"not awesome"，书中这样解释的

问题在于cool()函数丢失了同this之间的绑定

这句话怎么理解，加上一个定时器，为什么就会丢失this的绑定，内部的原理是怎样的？

Answer 1

因为this的指向发生了变化，setTimeout(fn,delay) { fn(); } 实际上fn是一个参数传递的引用(fn=obj.cool),在fn=obj.cool这里，this的指向从obj变成了全局，（fn的调用者是window对象，所以this指向了window。

你可以看下我之前写的一篇博客里面具体提到了this的这种传参丢失：js中的this总结

Answer 2

var obj={ 
id:"awesome",
cool:function coolFn(){
  console.log(this.id);
 }
};
obj.cool();
var id="not awesome";
setTimeout(obj.cool.bind(obj),1000);

谁调的函数，this就归谁。不想被操纵，可以反抗嘛~

Answer 3

setTimeout(function(){
    console.log(this.id);
})

你的代码相当于这个 this指向window

Answer 4

因为相当于给setTimeout传了个中间函数，这个函数就是obj.cool，所以this丢失了，指向了window。

Answer 5

可以看下ES6的箭头函数，this会指向对象本身而不是window

Answer 6