关于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 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
老生常谈的跨域处理
Jan 11 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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中使用模板的方法
2008/05/24 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
javascript 简练的几个函数
2009/08/29 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jQuery操作css样式
2017/05/15 jQuery
angular+webpack2实战例子
2017/05/23 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python气泡提示与标签的实现
2020/04/01 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
客户经理岗位职责
2015/01/31 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
赞美教师的句子
2019/09/02 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Python Socket编程详解
2021/04/25 Python
python 下划线的多种应用场景总结
2021/05/12 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server