关于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 相关文章推荐
详解AngularJS控制器的使用
Mar 09 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
input框中的name和id的区别
Nov 16 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 正则 过滤html 的超链接
2009/06/02 PHP
处理单名多值表单的详解
2013/06/08 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
javascript数据类型详解
2017/02/07 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python计算圆周率pi的方法
2015/07/11 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
如何将json数据转换为python数据
2020/09/04 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
会展中心部门工作职责
2013/11/27 职场文书
银行介绍信范文
2014/01/10 职场文书
自荐书范文范例
2014/02/13 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
报效祖国演讲稿
2014/09/15 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL