详解JS中定时器setInterval和setTImeout的this指向问题

前言闭包

Js是一个单线程语言，能够经过setTimeout()和setInterval()来设置代码在指定时刻运行，前者是在指定时间后执行，后者是指每隔一段时间执行。二者的使用方法相似。app

最近在练习写一个小例子的时候用到了定时器，发如今setInterval和setTimeout中传入函数时，函数中的this会指向window对象，详细的介绍经过一个示例展开，一块儿来看看吧。函数

以下例：this

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//0　　打印的为window.num，值为0

从上述例子中能够看到setTimeout中函数内的this是指向了window对象，这是因为setTimeout()调用的代码运行在与所在函数彻底分离的执行环境上. 这会致使这些代码中包含的 this 关键字会指向 window (或全局)对象。详细可参考MDN setTimeout.net

可是在setTimeout中传入的不是函数时，this则指向当前对象，以下例：prototype

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(console.log(this.num), 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

从以上两个例子能够看出，当在setTimeout中传入的参数为函数时，函数内部的this才会指向window对象。线程

当在setTimeout中传入了一个函数，若想要让this指向正确的值，可使用如下两种比较经常使用的方法来使this指向正确的值：指针

1.将当前对象的this存为一个变量，定时器内的函数利用闭包来访问这个变量code

以下：htm

var num = 0;
function Obj (){
 var that = this; //将this存为一个变量，此时的this指向obj
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(that.num); //利用闭包访问that，that是一个指向obj的指针
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

这种方法是将当前对象的引用放在一个变量里，定时器内部的函数来访问到这个变量，天然就能够获得当前的对象。

2.利用bind()方法

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }.bind(this), 1000) //利用bind()将this绑定到这个函数上
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

bind()方法是在Function.prototype上的一个方法，当被绑定函数执行时，bind方法会建立一个新函数，并将第一个参数做为新函数运行时的this。在这个例子中，在调用setTimeout中的函数时，bind方法建立了一个新的函数，并将this传进新的函数，执行的结果也就是正确的了。关于bind方法可参考 MDN bind

以上两种方法都是比较经常使用的，固然若是使用call或apply方法来代替bind方法，获得的结果也是正确的，可是call方法会在调用以后当即执行，那样也就没有了延时的效果，定时器也就没有用了，因此推荐使用上述两种方法来将this传进setTimeout和setInterval中。

本文转载于脚本之家，做者：陌路黄昏后的文章，原文连接：https://m.jb51.net/article/102232.htm

若有侵权，请告知删除