关于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以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 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超级全局变量
2010/01/26 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
使用变量动态设置js的属性名
2014/10/19 Javascript
js打造数组转json函数
2015/01/14 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jquery选择器简述
2015/08/31 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
Python 装饰器使用详解
2017/07/29 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python如何控制进程或者线程的个数
2020/10/16 Python
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
《木笛》教学反思
2014/03/01 职场文书
安全教育实施方案
2014/03/02 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
个人合作协议范本
2015/08/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL