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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
纯js实现手风琴效果
Apr 17 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
php5新改动之短标记启用方法
2008/09/11 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript 写类方式之九
2009/07/05 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS动态添加iframe的代码
2015/09/14 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
Python爬虫代理IP池实现方法
2017/01/05 Python
Python中装饰器高级用法详解
2017/12/25 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python语言中有算法吗
2020/06/16 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
如何利用find命令查找文件
2016/11/18 面试题
广告学专业应届生求职信
2013/10/01 职场文书
中文专业毕业生自荐信
2013/10/28 职场文书
保险内勤岗位职责
2014/04/05 职场文书
局火灾防控工作方案
2014/05/25 职场文书
党员四风剖析材料
2014/08/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL