關于this和self的使用說明

2019-11-21 00:19:19

字體：大中小

來源：轉載

供稿：網(wǎng)友

前兩天在寫一個chrome的extensions，因為 content里和background交互必需要一個異步方法實現(xiàn)，如：

 
var Test = new Class({ 
options: {}, 
initialize: function(args) { 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
this.options = options; 
…… 
}); 
} 
}); 

這個this應該是Test這個對象，但是回調(diào)方法里是空的。難道要把this做參數(shù)傳過去，再call回來？還好，mootools里有個好方法，bind。

復制代碼代碼如下:

 
var Test = new Class({ 
options: {}, 
initialize: function(args) { 
chrome.extension.sendRequest({ 'type':'options' }, function(options) { 
this.options = options; 
…… 
}.bind(this)); 
} 
}); 

這下OK了，繼續(xù)寫：

復制代碼代碼如下:

 
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 {} 
}); 