关于this和self的使用说明


Posted in Javascript onAugust 01, 2010

前两天在写一个chrome的extensions,因为 content里和background交互必需要一个异步方法实现,如:

var Test = new Class({ 
options: {}, 
initialize: function(args) { 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
this.options = options; 
…… 
}); 
} 
});

这个this应该是Test这个对象,但是回调方法里是空的。难道要把this做参数传过去,再call回来?还好,mootools里有个好方法,bind。
var Test = new Class({ 
options: {}, 
initialize: function(args) { 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
this.options = options; 
…… 
}.bind(this)); 
} 
});

这下OK了,继续写:
var Test = new Class({ 
options: {}, 
initialize: function(args) { 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
this.options = options; 
$each(this.options, function(o, i) { 
if (o == '1') { 
this.fun1(); 
} else { 
this.fun2(); 
} 
}.bind(this)); 
}.bind(this)); 
}, 
fun1: function {}, 
fun2: function {} 
});

就算有bind也不容易分清哪个this是什么了。而真实的代码比这个要恐怖的多,有的情况下,我们的确需要this指向其它的变量,而不是这个类。
最常用的解决方法,是这样:

var Test = new Class({ 
options: {}, 
initialize: function(args) { 
var _self = this; 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
_self.options = options; 
$each(_self.options, function(o, i) { 
if (o == '1') { 
_self.fun1(); 
} else { 
_self.fun2(); 
} 
}); 
}); 
}, 
fun1: function {}, 
fun2: function {} 
});

我特别定义了一个_self的变量来代替this,这看起来象什么?python!
现在终于体会到python的self绝对不是多此一举。
Javascript 相关文章推荐
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
ajax 缓存 问题 requestheader
Aug 01 #Javascript
parseInt parseFloat js字符串转换数字
Aug 01 #Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 #Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 #Javascript
javascript函数中的arguments参数
Aug 01 #Javascript
jquery dialog键盘事件代码
Aug 01 #Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 #Javascript
You might like
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue使用原生swiper代码实例
2020/02/05 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现的矩阵类实例
2017/08/22 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
劳资员岗位职责
2013/11/11 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
生日宴会答谢词
2014/01/09 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
生物科学专业自荐书
2014/06/20 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python