Javascript对象中关于setTimeout和setInterval的this介绍


Posted in Javascript onJuly 21, 2012

在Javascript里,setTimeout和setInterval接收第一个参数是一个字符串或者一个函数,当在一个对象里面用setTimeout延时调用该对象的方法时

function obj() { 
this.fn = function() { 
alert("ok"); 
console.log(this); 
setTimeout(this.fn, 1000);//直接使用this引用当前对象 
} 
} 
var o = new obj(); 
o.fn();

然后我们发现上面的代码不是想要的结果,原因是setTimeout里面的this是指向window,所以要调用的函数变成 window.fn 为undefined,于是悲剧了。所以问题的关键在于得到当前对象的引用,于是有以下三种方法
// 方法一: function obj() { 
this.fn = function() { 
alert("ok"); 
console.log(this); 
setTimeout(this.fn.bind(this), 1000);//通过Function.prototype.bind 绑定当前对象 
} 
} 
var o = new obj(); 
o.fn();

这样可以得到正确的结果,可惜Function.prototype.bind方法是ES5新增的标准,测试了IE系列发现IE6-8都不支持,只有IE9+可以使用。要想兼容就得简单的模拟下bind,看下面的代码
// 方法二: 
function obj() { 
this.fn = function() { 
alert("ok"); 
setTimeout((function(a,b){ 
return function(){ 
b.call(a); 
} 
})(this,this.fn), 1000);//模拟Function.prototype.bind 
} 
} 
var o = new obj(); 
o.fn();

首先通过一个自执行匿名函数传当前对象和对象方法进去,也就是里面的参数a和b,再返回一个闭包,通过call方法使this指向正确。下面是比较简洁的方法
// 方法三: 
function obj() { 
this.fn = function() { 
var that = this;//保存当前对象this 
alert("ok"); 
setTimeout(function(){ 
that.fn(); 
}, 1000);//通过闭包得到当前作用域,好访问保存好的对象that 
} 
} 
var o = new obj(); 
o.fn();

上面第三个方法的两个关键点是 保存当前对象this为别名that 和 通过闭包得到当前作用域,以访问保存好的对象that;当对象方法里面多层嵌套函数或者setTimeout,setInterval等方法丢失this(也就是this不指向当前对象而是window),所以在this指向正确的作用域保存var that = this就变得很实用了
Javascript 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 #Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 #Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 #Javascript
基于jquery的可多选的下拉列表框
Jul 20 #Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 #Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 #Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 #Javascript
You might like
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP中的替代语法简介
2014/08/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue实现记事本功能
2019/06/26 Javascript
学习python (2)
2006/10/31 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python实现猜拳小游戏
2020/04/05 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python阶乘求和的代码详解
2020/02/14 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
浙大网新C/C++面试解惑
2015/05/27 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
党支部承诺书
2015/01/20 职场文书
现实表现证明材料
2015/06/19 职场文书
毕业典礼主持词
2015/06/29 职场文书