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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JavaScript验证知识整理
Mar 24 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
Vue实现简单的跑马灯
May 25 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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在线生成ico文件的代码
2007/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物