关于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脚本性能的优化方法
Feb 02 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
深入php处理整数函数的详解
2013/06/09 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python实现的矩阵类实例
2017/08/22 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
敏捷开发的主要原则都有哪些
2015/04/26 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
品质主管的岗位职责
2013/12/04 职场文书
小学生家长寄语
2014/04/02 职场文书
创建文明城市标语
2014/06/16 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年教师国培感言
2015/08/01 职场文书
三好学生竞选稿
2015/11/21 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL