setInterval中this问题,以及bind绑定this的指向问题

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就变得很实用了
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 JavaScript ,`clearInterval()` 函数用于取消由 `setInterval()` 创建的周期性定时器。`clearInterval()` 函数不会改变 `this` 的指向,它只是取消定时器的执行。 当您使用 `setInterval()` 创建定时器时,它会返回一个唯一的定时器标识符(timer identifier)。您可以使用该标识符作为参数传递给 `clearInterval()` 函数,以便取消相应的定时器。 请注意,在 JavaScript ,函数的 `this` 值是根据函数的调用方式来确定的。如果您在定时器回调函数使用 `this`,它将指向全局对象(`window` 对象)或者在严格模式下为 `undefined`。这是因为定时器回调函数是在全局范围内调用的,而不是在对象或上下文调用的。 为了在定时器回调函数访问特定的对象或上下文,您可以使用箭头函数或 `.bind()` 方法将函数绑定到特定的对象。这样,`this` 将指向绑定的对象而不是全局对象。 以下是一个示例,展示了如何使用箭头函数或 `.bind()` 方法来绑定函数的上下文: ```javascript // 使用箭头函数 const obj = { name: "Example", startTimer() { setInterval(() => { console.log(this.name); }, 1000); } }; obj.startTimer(); // 在每秒钟输出 "Example" // 使用 .bind() 方法 const obj2 = { name: "Another Example", startTimer() { setInterval(function() { console.log(this.name); }.bind(this), 1000); } }; obj2.startTimer(); // 在每秒钟输出 "Another Example" ``` 请注意,使用箭头函数会自动继承外部作用域的 `this` 值,而使用 `.bind()` 方法需要显式地绑定 `this` 值。这取决于您的需求和使用场景来选择合适的方法。无论使用哪种方法,`clearInterval()` 函数都不会改变 `this` 的指向

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值