关于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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php防盗链的常用方法小结
2010/07/02 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
tornado+celery的简单使用详解
2019/12/21 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Pandas的数据过滤实现
2021/01/15 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014年检验科工作总结
2014/11/22 职场文书
win10下go mod配置方式
2021/04/25 Golang
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
阿里云日志过滤器配置日志服务
2022/04/09 Servers