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


Posted in Javascript onJanuary 06, 2017

前言

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
从vue源码看props的用法
Jan 09 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
详解Vite的新体验
Feb 22 Javascript
JS数组去重详情
Nov 07 Javascript
Jqprint实现页面打印
Jan 06 #Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 #Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 #Javascript
jQuery编写网页版2048小游戏
Jan 06 #Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 #Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 #Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 #Javascript
You might like
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
工作睡觉检讨书
2014/02/25 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
普通话演讲稿
2014/09/03 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
企业承诺书格式范文
2015/04/28 职场文书
校长一岗双责责任书
2015/05/09 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
初一语文教学反思
2016/03/03 职场文书