Javascript对象中关于setTimeout和setInterval的this介绍
JavaScript对象 介绍 关于 this setTimeout setInterval
2023-06-13 09:14:34 时间
在Javascript里,setTimeout和setInterval接收第一个参数是一个字符串或者一个函数,当在一个对象里面用setTimeout延时调用该对象的方法时
复制代码代码如下:
functionobj(){
this.fn=function(){
alert("ok");
console.log(this);
setTimeout(this.fn,1000);//直接使用this引用当前对象
}
}
varo=newobj();
o.fn();
然后我们发现上面的代码不是想要的结果,原因是setTimeout里面的this是指向window,所以要调用的函数变成window.fn为undefined,于是悲剧了。所以问题的关键在于得到当前对象的引用,于是有以下三种方法
//方法一:
functionobj(){
this.fn=function(){
alert("ok");
console.log(this);
setTimeout(this.fn.bind(this),1000);//通过Function.prototype.bind绑定当前对象
}
}
varo=newobj();
o.fn();
这样可以得到正确的结果,可惜Function.prototype.bind方法是ES5新增的标准,测试了IE系列发现IE6-8都不支持,只有IE9+可以使用。要想兼容就得简单的模拟下bind,看下面的代码
//方法二:
functionobj(){
this.fn=function(){
alert("ok");
setTimeout((function(a,b){
returnfunction(){
b.call(a);
}
})(this,this.fn),1000);//模拟Function.prototype.bind
}
}
varo=newobj();
o.fn();
首先通过一个自执行匿名函数传当前对象和对象方法进去,也就是里面的参数a和b,再返回一个闭包,通过call方法使this指向正确。下面是比较简洁的方法
//方法三:
functionobj(){
this.fn=function(){
varthat=this;//保存当前对象this
alert("ok");
setTimeout(function(){
that.fn();
},1000);//通过闭包得到当前作用域,好访问保存好的对象that
}
}
varo=newobj();
o.fn();
上面第三个方法的两个关键点是保存当前对象this为别名that和通过闭包得到当前作用域,以访问保存好的对象that;当对象方法里面多层嵌套函数或者setTimeout,setInterval等方法丢失this(也就是this不指向当前对象而是window),所以在this指向正确的作用域保存varthat=this就变得很实用了
相关文章
- JavaScript各种定时器总结
- 深入理解javascript对象
- 【说站】JavaScript对象原型__ proto__的介绍
- JavaScript——对象
- JavaScript 对象
- JavaScript合并两个Json对象详解编程语言
- JavaScript中的Window(浏览器对象)使用详解编程语言
- javaScript对象和属性的创建方法
- JavaScript使用技巧精萃[代码非常实用]
- JavaScript拖放效果代码
- javascript表单中浏览文件的“浏览”按钮修改
- javascript定义新对象方法
- Javascript去除数组的重复元素
- Javascript中的变量使用说明
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript传递变量:值传递?引用传递?
- 巧解JavaScript中的嵌套替换(强大正则)
- javascript克隆对象深度介绍
- javascript对select标签的控制(option选项/select)
- JavaScript中this的使用详解
- Javascript连接多个数组不用concat来解决
- JavaScript对象之深度克隆介绍
- JavaScript中对象property的删除方法介绍
- JavaScript中的包装对象介绍