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

前言

Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行。两者的使用方法类似。

最近在练习写一个小例子的时候用到了定时器,发现在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则指向当前对象,如下例:

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存为一个变量,定时器内的函数利用闭包来访问这个变量

如下:

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中。

(0)

相关推荐

  • 详解打板中的分歧转一致

    一致性与分歧性的问题是市场交易中需要深度思考的重要问题,理解不好不仅是陷阱,而且会阻碍你对板学的认识! 一致性问题在很多散户的思维中一直是一个没能正确理解的大误区. 什么是打板一致与分歧 什么是&qu ...

  • 罗盘实用详解22 中针消砂

    罗盘实用详解22 中针消砂

  • 罗盘实用详解27 中针与星宿的五行区别

    罗盘实用详解27 中针与星宿的五行区别

  • 详解摄影中的快门速度,帮你轻松拍大片

    打开凤凰新闻,查看更多高清图片 使用快速快门速度捕获的鸟的图像 一个对初学者来说很重要的曝光变量 摄影中三个最重要的设置之一是快门速度,另外两个是光圈和ISO.快门速度决定了两件事:一是改变照片的亮度 ...

  • 八字命理揭秘—八字术语详解(中)

    [从象] 此乃神趣八法之一.算命术中,神趣八法是算命相当重要的方面.其具体内容有:返象.照象.鬼象.伏象.属象.类象.从象.化象.此八法为看命定格之大关键.从象者,如壬水无根,地支全木,谓从木.地支全 ...

  • 详解Qt中的状态机机制(一)

    状态机,简写为FSM(Finite State Machine),状态机由状态寄存器和组合逻辑电路构成,能够根据控制信号按照预先设定的状态进行状态转移,是协调相关信号动作.完成特定操作的控制中心. 在 ...

  • 中考英语核心词汇详解,中考生再次复习,认真看!(I、J、K开头)

    今天老师整理了中考英语复习的重点核心词汇,总结中考核心词汇考点,甄选高频.难记.易混词汇,并辅以最新中考真题,希望帮助考生们抓住要重点.提升效率.前面的发过的部分小编都已经放在了菜单栏哦,不要忘记打卡 ...

  • 齐炳权:详解奇门遁甲中的值符与值使

    文/齐炳权 学习奇门遁甲要理清主次.脉络.<奇门大全>曰:"凡奇门占法,静则只查值符值使,动则专看方向.盖动者机之先见者也." 奇门遁甲局中先看值符,值使,这是纲领性的 ...

  • 多少人不会养鱼死在这张图上,详解鱼缸中的硝化过程!

    金鱼的王者 383篇原创内容 公众号 本文主要将与主题相关的一些专业理论简述一下,鱼缸的硝化(过滤)系统几个关键方面做一下阐述.养鱼先养水,养水就是养硝化系统,而硝化系统下面一张图全部表示. 鱼类杀手 ...