关于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结合css实现网页换肤功能
Nov 02 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Nuxt.js实战详解
Jan 18 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
微信小程序 button样式设置为图片的方法
Jun 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基础知识:类与对象(1)
2006/12/13 PHP
php实现分页工具类分享
2014/01/09 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
原生js实现分页效果
2020/09/23 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
升学宴演讲稿
2014/09/01 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang