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

更新时间：2012年07月21日 09:32:00 作者：

Javascript对象中关于setTimeout和setInterval的this介绍，需要的朋友可以参考下

在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就变得很实用了

您可能感兴趣的文章:

JS中多层次排序算法的实现代码
这篇文章主要给大家介绍了关于JS中多层次排序算法的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
JS函数验证总结(方便js客户端输入验证)
JS函数验证总结，都是一些基础的东西，现在比较流行jquery了，不过这些东西仍然需要大家会。
2010-10-10
Javascript 继承机制实例
说明继承机制最简单的方法是，利用一个经典的例子——几何形状。
2009-08-08
JavaScript删除字符串中指定字符的4种方法汇总
在前端面试中,经常会问到这样的一个问题,删除字符串中指定字符,下面这篇文章主要给大家介绍了关于JavaScript删除字符串中指定字符的4种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
JavaScript计时器用法分析【setTimeout和clearTimeout】
这篇文章主要介绍了JavaScript计时器用法,结合实例形式分析了setTimeout和clearTimeout函数的具体使用技巧,需要的朋友可以参考下
2017-01-01
浅谈document.write()输出样式
这篇文章主要介绍了浅谈document.write()输出样式，十分的简单实用，有需要的小伙伴可以参考下。
2015-05-05
JS进阶之从多线程到Event Loop全面梳理
JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题
2023-05-05
JavaScript中跨标签页通信的常见方式
跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程,这篇文章为大家整理了几个常见的跨标签页通信方式,感兴趣的小伙伴可以了解下
2023-10-10
js实现一键换肤效果
这篇文章主要为大家详细介绍了js实现一键换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript实现元素滚动条到达一定位置循环追加内容
下面小编就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容，具有很好的参考价值，希望对大家有所帮助
2017-12-12