关于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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
两种php实现图片上传的方法
2016/01/22 PHP
js特殊字符过滤的示例代码
2014/03/05 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
python中set()函数简介及实例解析
2018/01/09 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
劳动模范事迹材料
2014/01/19 职场文书
亮化工程实施方案
2014/03/17 职场文书
跳蚤市场口号
2014/06/13 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
赡养老人协议书范本
2015/08/06 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技