关于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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
js+css实现红包雨效果
Jul 12 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
微信小程序选择图片控件
Jan 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
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JS删除数组元素的函数介绍
2013/03/27 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python分割文件的常用方法
2014/11/01 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python实现弹球小游戏
2020/08/01 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
学习自我鉴定
2014/02/01 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
企业授权委托书范本
2014/09/22 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016年教代会开幕词
2016/03/04 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers