关于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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue实现购物车功能(商品分类)
Apr 20 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/09/10 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python正则表达式和元字符详解
2018/11/29 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python算的上脚本语言吗
2020/06/22 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
会计自荐书
2013/12/02 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
校园学雷锋广播稿
2014/10/08 职场文书