关于this和self的使用说明

233 阅读 0 评论 154 点赞

我是靠谱客的博主安详小刺猬，最近开发中收集的这篇文章主要介绍关于this和self的使用说明，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前两天在写一个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 {} 
}); 