当前位置： 移动技术网 > IT编程>开发语言>JavaScript > setInterval和setTImeout中的this指向问题

setInterval和setTImeout中的this指向问题

2019年05月21日  | 移动技术网IT编程  | 我要评论

问题描述：

前些天在练习写一个小例子的时候用到了定时器，发现在setinterval和settimeout中传入函数时，函数中的this会指向window对象，如下例：

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

解决方法：

若想要让settimeout中的this指向正确的值，可以使用以下三种比较常用的方法来使this指向正确的值：

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

var num = 0;
function obj (){
const 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

3. 箭头函数

var num = 0;
function obj (){
this.num = 1,
this.getnum = function(){
console.log(this.num);
},
this.getnumlater = function(){
settimeout(() => {
console.log(this.num);
}, 1000) //箭头函数中的this总是指向外层调用者，也就是obj
}
}
var obj = new obj;
obj.getnum();//1　　打印的是obj.num，值为1
obj.getnumlater()//1　　打印的是obj.num，值为1

es6中的箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj，因此利用箭头函数就可以轻松解决这个问题。

以上三种方法都是比较常用的，当然如果使用call或apply方法来代替bind方法，得到的结果也是正确的，但是call方法会在调用之后立即执行，那样也就没有了延时的效果，定时器也就没有用了，所以推荐使用上述方法来将this传进settimeout和setinterval中。 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网