关于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  THIS详解 面向对象
Mar 25 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
js动态生成表格(节点操作)
Jan 12 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Vue实现验证码功能
2019/12/03 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
房地产财务管理制度
2014/02/02 职场文书
网页美工求职信范文
2014/04/17 职场文书
长江三峡导游词
2015/01/31 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫