关于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 相关文章推荐
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
js正则匹配多个全部数据问题
Dec 20 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
用JS实现飞机大战小游戏
Jun 09 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获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
js中function()使用方法
2013/12/24 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python梯度下降算法的实现
2020/02/24 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
幼儿师范毕业生自荐信
2013/11/09 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
银行职员自我鉴定
2014/04/20 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
家长评语怎么写
2014/12/30 职场文书
家长会主持词开场白
2015/05/29 职场文书
小平小道观后感
2015/06/09 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript