关于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 UI皮肤定制
Jul 27 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
jquery实现手风琴案例
May 04 jQuery
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
第九节 绑定 [9]
2006/10/09 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
python的id()函数介绍
2013/02/10 Python
Python标准异常和异常处理详解
2015/02/02 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Django更新models数据库结构步骤
2020/04/01 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
董事长年会致辞
2015/07/29 职场文书
2016年寒假生活小结
2015/10/10 职场文书
班主任寄语2016
2015/12/04 职场文书
Pandas自定义选项option设置
2021/07/25 Python
MySQL视图概念以及相关应用
2022/04/19 MySQL