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 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
微信小程序实现animation动画
Jan 26 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
旅游网创业计划书
2014/01/31 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
医学专业大学生求职信
2014/07/12 职场文书
学生上课说话检讨书
2014/10/25 职场文书
思想政治表现评语
2015/01/04 职场文书
满月酒邀请函
2015/01/30 职场文书
车辆挂靠协议书
2016/03/23 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Python中的嵌套循环详情
2022/03/23 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis
python+opencv实现目标跟踪过程
2022/06/21 Python