JS中的this關(guān)鍵字讓很多新老JS開(kāi)發(fā)人員都感到困惑。這篇文章將對(duì)this關(guān)鍵字進(jìn)行完整地闡述。讀完本文以后，您的困惑將全部消除。您將學(xué)會(huì)如何在各種不同的情形正確運(yùn)用this。
我們和在英語(yǔ)、法語(yǔ)這樣的自然語(yǔ)言中使用名詞一樣地使用this。比如，“John飛快地跑著，因?yàn)樗胱飞匣疖?chē)”。請(qǐng)注意這句話中的代指John的代名詞“他”。我們?cè)疽部梢赃@樣表達(dá)，“John飛快地跑著，因?yàn)镴ohn想追上火車(chē)”。按照正常的語(yǔ)言習(xí)慣，我們并不按第二種方式表達(dá)。如果我們真按第二種方式說(shuō)話，我們的家人和基友一定會(huì)把我們當(dāng)成怪胎。說(shuō)不定不止家人，甚至連我們的酒肉朋友和同事都會(huì)遠(yuǎn)離我們。類似地，在JS中，我們把this關(guān)鍵字當(dāng)成一種快捷方式，或者說(shuō)是引用（referent）。this關(guān)鍵字指向的是當(dāng)前上下文（context，下文中將會(huì)對(duì)此作專門(mén)的解釋）的主體（subject），或者當(dāng)前正在被執(zhí)行的代碼塊的主體。
考慮以下代碼：
-
var person = {
-
firstName: "Penelope",
-
lastName: "Barrymore",
-
fullName: function () {
-
-
-
console.log(this.firstName + " " + this.lastName);
-
-
console.log(person.firstName + " " + person.lastName);
-
}
-
}
如果我們使用person.firstName和person.lastName，某些情況下代碼會(huì)變得模棱兩可。例如，全局變量中有一個(gè)跟person同名的變量名。這種情況下，如果我們想要讀取person.firstName的值，系統(tǒng)將有可能從全局變量的person變量中讀取firstName屬性（property）。這樣一來(lái)，我們調(diào)試代碼的時(shí)候很難發(fā)現(xiàn)錯(cuò)誤。所以this并不只起到美化代碼的作用，同時(shí)也是為了保證程序的準(zhǔn)確性。這種做法實(shí)際上和前面講到的“他”的用法一樣，使得我們的代碼更加清晰。“他”所引用的正是句首的“John”。
正如代名詞“他”被用來(lái)代指句中的先行詞（先行詞就是代名詞所指示的名詞），this關(guān)鍵字以同樣的方式來(lái)引用當(dāng)前方法（function，也可以稱為函數(shù)）所綁定（bound）的對(duì)象。this不只引用對(duì)象，同時(shí)包含了對(duì)象的值。跟先行詞一樣，this也可以被理解成在上下文中用來(lái)引用當(dāng)前對(duì)象（又叫作“先行詞對(duì)象”）的快捷方式（或者來(lái)適度減少歧義的替代品）。我們遲些會(huì)專門(mén)講解“上下文”。
this關(guān)鍵字基本理論
首先我們得知道，對(duì)象(Object)有屬性集（properties），所有的方法（function）也有屬性集。運(yùn)行到某個(gè)方法的時(shí)候就有了一個(gè)this屬性―一個(gè)存儲(chǔ)了調(diào)用該方法（準(zhǔn)確地說(shuō)是使用了this關(guān)鍵字的方法）的對(duì)象的值的變量。
this關(guān)鍵字始終指向一個(gè)對(duì)象并持有這個(gè)對(duì)象的值，盡管它可以出現(xiàn)在全局范圍（global scope）方法（函數(shù)）以外的地方，但它通常出現(xiàn)在方法體中。值得注意的是，如果我們使用嚴(yán)格模式（strict mode），并在全局方法（global functions）或者沒(méi)有綁定到任何對(duì)象的匿名方法中使用this關(guān)鍵字時(shí)，this將會(huì)指向undefined。
this被用在方法體中，比如方法A，它將指向調(diào)用方法A的對(duì)象的值。并不是任何情況我們都能找到調(diào)用方法A的對(duì)象名，這時(shí)候就用this來(lái)訪問(wèn)調(diào)用方法A的對(duì)象所擁有的方法和屬性。this確實(shí)只是一個(gè)用來(lái)引用先行詞―調(diào)用方法的對(duì)象―的快捷方式。
我們來(lái)仔細(xì)體會(huì)下面這段使用this的代碼。
-
var person = {
-
firstName: "Penelope",
-
lastName: "Barrymore",
-
-
-
showFullName: function() {
-
console.log(this.firstName + " " + this.lastName);
-
}
-
}
-
person.showFullName();
再考慮下面這段使用了this的jQuery示例。
-
-
-
$("button").click(function(event) {
-
-
-
console.log($(this).prop("name"));
-
});
我想詳細(xì)地說(shuō)一下上面這個(gè)jQuery示例:$(this)的使用，這是this的jQuery版本，它用于匿名方法中，這個(gè)匿名方法在button的單擊事件里執(zhí)行。這里之所以說(shuō)$(this)被綁定到button對(duì)象，是因?yàn)閖Query庫(kù)把$(this)綁定到調(diào)用click方法的對(duì)象上。因此，盡管$(this)被定義在一個(gè)自身無(wú)法訪問(wèn)“自身”變量的匿名方法里，$(this)仍會(huì)指向button對(duì)象。
請(qǐng)注意，button是一個(gè)HTML頁(yè)面的DOM元素，它同時(shí)是一個(gè)對(duì)象：在上面的例子中，因?yàn)槲覀儼阉b在了jQuery的$()方法里，所以它是一個(gè)jQuery對(duì)象。
this關(guān)鍵字的核心
下面這條規(guī)則可以幫助你徹底搞懂this關(guān)鍵字：如果一個(gè)方法內(nèi)部使用了this關(guān)鍵字，僅當(dāng)對(duì)象調(diào)用該方法時(shí)this關(guān)鍵字才會(huì)被賦值。我們估且把使用了this關(guān)鍵字的方法稱為“this方法”。
盡管看上去this引用了它在代碼中所存在于的對(duì)向，事實(shí)上在方法被調(diào)用之前它并沒(méi)有被賦值，而賦給它的值又嚴(yán)格地依賴于實(shí)際調(diào)用“this方法”的對(duì)象。this通常會(huì)被賦予調(diào)用對(duì)象的值，下面有一些特殊情況。
全局范圍里的this
在全局域中，代碼在瀏覽器里執(zhí)行，所有變量和方法都屬于window對(duì)象。因而當(dāng)我們?cè)谌钟蛑惺褂胻his關(guān)鍵字的時(shí)候，它會(huì)被指向（并擁有）全局變量window對(duì)象。如前所述，嚴(yán)格模式除外。window對(duì)象是JS一個(gè)程序或一張網(wǎng)頁(yè)的主容器。
因而：
-
var firstName = "Peter",
-
lastName = "Ally";
-
-
function showFullName() {
-
-
-
console.log(this.firstName + " " + this.lastName);
-
}
-
-
var person = {
-
firstName: "Penelope",
-
lastName: "Barrymore",
-
showFullName: function() {
-
-
console.log(this.firstName + " " + this.lastName);
-
}
-
}
-
-
showFullName();
-
-
-
window.showFullName();
-
-
-
person.showFullName();
對(duì)付this有絕招
當(dāng)方法內(nèi)使用了this關(guān)鍵字時(shí)，這幾種情況容易引起誤解：方法被借用；把方法賦值給某個(gè)變量；方法被用作回調(diào)函數(shù)（callback），被作為參數(shù)傳遞；this所在的方法是個(gè)閉包（該方法是一個(gè)內(nèi)部方法）。針對(duì)這幾種情況，我們將逐一攻破。在此之前，我們先簡(jiǎn)單介紹一下“上下文”(context)。
JS當(dāng)中的上下文跟這句話中的主語(yǔ)(subject)類似：“John是贏家，他還了錢(qián)”。這句話的主語(yǔ)是John。我們也可以說(shuō)這句話的上下文是John，因?yàn)槲覀冊(cè)谶@句話中關(guān)注的是John，即使這里有一個(gè)“他”字來(lái)代指John這個(gè)先行詞。正如我們可以使用分號(hào)來(lái)切換句子的主語(yǔ)一樣，通過(guò)使用不同的對(duì)象來(lái)對(duì)方法進(jìn)行調(diào)用，當(dāng)前的上下文對(duì)象同樣可以被切換。
類似地，以下JS代碼：
-
var person = {
-
firstName: "Penelope",
-
lastName: "Barrymore",
-
showFullName: function() {
-
-
console.log(this.firstName + " " + this.lastName);
-
}
-
}
-
-
-
-
person.showFullName();
-
-
var anotherPerson = {
-
firstName: "Rohit",
-
lastName: "Khan"
-
};
-
-
-
-
person.showFullName.apply(anotherPerson);
-
現(xiàn)在我們開(kāi)始正式討論應(yīng)付this關(guān)鍵字的絕招，例子里包含了this所引發(fā)的錯(cuò)誤以及解決方案。
1.當(dāng)this被用作回調(diào)函數(shù)傳入其它方法
當(dāng)我們把一個(gè)使用了this關(guān)鍵字的方法當(dāng)成參數(shù)作為回函數(shù)的時(shí)候，麻煩就來(lái)了。例如：
-
-
var user = {
-
data: [{
-
name: "T. Woods",
-
age: 37
-
},
-
{
-
name: "P. Mickelson",
-
age: 43
-
}],
-
clickHandler: function(event) {
-
var randomNum = ((Math.random() * 2 | 0) + 1) - 1;
-
-
console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
-
}
-
}
-
-
-
-
$("button").click(user.clickHandler);
上面的代碼中，我們把user.clickHandler當(dāng)成回調(diào)函數(shù)傳入$(“button”)對(duì)象的click事件，user.clickHandler中的this將不再指向user對(duì)象轉(zhuǎn)。誰(shuí)調(diào)用了這個(gè)包含this的方法this就會(huì)指向誰(shuí)。真正調(diào)用user.clickHandler的對(duì)象是button對(duì)象―user.clickHandler會(huì)在button對(duì)象的單擊方法里執(zhí)行。
注意，盡管我們使用user.clickHandler來(lái)調(diào)用clickHander方法（我們也只能這么做，因?yàn)閏lickHandler是定義在user對(duì)象上的），clickHandler方法本身會(huì)被現(xiàn)在被this所指向的上下文對(duì)象所調(diào)用。所以this現(xiàn)在指向的是$(“button”)對(duì)象。
當(dāng)上下文改變時(shí)―當(dāng)我們?cè)谄渌鼘?duì)象而非原對(duì)象上執(zhí)行某個(gè)方法的時(shí)候，顯然this關(guān)鍵字不再指向定義了this關(guān)鍵字的原對(duì)象。
解決方案：
由于我們真的很想讓this.data指向user對(duì)象的data屬性，我們可以使用Bind/ Apply/ Call等方法來(lái)強(qiáng)制改變this所指向的對(duì)象。本系列的其它篇目將專門(mén)對(duì)Bind/ Apply/ Call進(jìn)行講解，文中介紹了如何在不同的情況強(qiáng)制改變this的值的方法。與其在本文大篇幅討論，我強(qiáng)烈建議大家直接去讀另外的篇目（譯者注：晚些時(shí)候放出這里所說(shuō)的“其它篇目”）。
為了解決前面代碼中的問(wèn)題，我們可以使用bind方法。
針對(duì)下面這行代碼：
$ ("button").click (user.clickHandler);
我們可以用bind方法把clickHandler綁定的user對(duì)象上：
$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43
2.閉包中的this
在內(nèi)部方法中，或者說(shuō)閉包中使用this，是另一個(gè)很容易被誤解的例子。我們必須注意的是，內(nèi)部方法不能直接通過(guò)使用this關(guān)鍵字來(lái)訪問(wèn)外部方法的this變量，因?yàn)閠his變量 只能被特定的方法本身使用。例如：
-
var user = {
-
tournament: "The Masters",
-
data: [{
-
name: "T. Woods",
-
age: 37
-
},
-
{
-
name: "P. Mickelson",
-
age: 43
-
}],
-
-
clickHandler: function() {
-
-
this.data.forEach(function(person) {
-
-
-
console.log("What is This referring to? " + this);
-
console.log(person.name + " is playing at " + this.tournament);
-
-
-
})
-
}
-
-
}
-
-
user.clickHandler();
因?yàn)槟涿椒ㄖ械膖his不能訪問(wèn)外部方法的this，所以在非嚴(yán)格模式下，this指向了全局的window對(duì)象
解決方案：
在進(jìn)入forEach方法之前，額外使用一個(gè)變量來(lái)引用this。
-
var user = {
-
tournament: "The Masters",
-
data: [{
-
name: "T. Woods",
-
age: 37
-
},
-
{
-
name: "P. Mickelson",
-
age: 43
-
}],
-
-
clickHandler: function(event) {
-
-
var theUserObj = this;
-
this.data.forEach(function(person) {
-
-
console.log(person.name + " is playing at " + theUserObj.tournament);
-
})
-
}
-
-
}
-
-
user.clickHandler();
-
-
正如下面的代碼，很多JS開(kāi)發(fā)人員喜歡使用變量that來(lái)設(shè)置this的值。但我個(gè)人不太喜歡用that這個(gè)名字，我喜歡使用讓人一眼就能看懂this到底指向誰(shuí)的那種名字，所以上面的代碼中我使用了theUserObj = this。
3.方法被賦值給某個(gè)變量
this關(guān)鍵字有時(shí)候很調(diào)皮，如果我們把一個(gè)使用了this關(guān)鍵字的方法賦值給一個(gè)變量，我們來(lái)看會(huì)有什么有趣的事發(fā)生：
// data變量是一個(gè)全局變量
var data = [{
name: "Samantha",
age: 12
},
{
name: "Alexis",
age: 14
}];
var user = {
// 而這里的data是user的一個(gè)屬性
data: [{
name: "T. Woods",
age: 37
},
{
name: "P. Mickelson",
age: 43
}],
showData: function(event) {
var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 隨機(jī)生成1或0
//這句話會(huì)從數(shù)組data里隨機(jī)顯示人名和歲數(shù)
console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
// 把user.showData方法賦值給變量 showUserData
var showUserData = user.showData;
//執(zhí)行showUserData方法，結(jié)果將 來(lái)自全局的data數(shù)組而非user對(duì)象的data屬性
showUserData(); // Samantha 12 (來(lái)自全局變量data)
//解決方案：通過(guò)使用bind方法來(lái)顯式設(shè)置this的值
//把showData方法綁定到user對(duì)象上
var showUserData = user.showData.bind(user);
//現(xiàn)在結(jié)果將來(lái)自u(píng)ser對(duì)象，因?yàn)閠his關(guān)鍵字已經(jīng)被強(qiáng)制綁定到user對(duì)象上了
showUserData(); // P. Mickelson 43
4.借用方法帶來(lái)的問(wèn)題
JS開(kāi)發(fā)中，借用方法（borrowing methods）很常見(jiàn)。
我們來(lái)看下面的代碼：
-
-
var gameController = {
-
scores: [20, 34, 55, 46, 77],
-
avgScore: null,
-
players: [{
-
name: "Tommy",
-
playerID: 987,
-
age: 23
-
},
-
{
-
name: "Pau",
-
playerID: 87,
-
age: 33
-
}]
-
}
-
-
var appController = {
-
scores: [900, 845, 809, 950],
-
avgScore: null,
-
avg: function() {
-
-
var sumOfScores = this.scores.reduce(function(prev, cur, index, array) {
-
return prev + cur;
-
});
-
-
this.avgScore = sumOfScores / this.scores.length;
-
}
-
}
-
-
-
-
gameController.avgScore = appController.avg();
avg方法的this關(guān)鍵字指向的是gameController對(duì)象，如果使用appController調(diào)用該方法，this將會(huì)指向appController(但事實(shí)上這并不是我們期望的結(jié)果，因?yàn)槲覀冎幌虢栌梅椒ǖ膶?shí)現(xiàn)邏輯而非具體的數(shù)據(jù)來(lái)源)。
解決方案：
為了保證gameController只借用appController的avg方法的邏輯，我們使用apply方法：
-
-
appController.avg.apply(gameController, gameController.scores);
-
-
-
console.log(gameController.avgScore);
-
-
console.log(appController.avgScore);
gameController只借用了appController的avg方法，這時(shí)this將指向gameController，因?yàn)槲覀儼裧ameController作為apply方法的個(gè)參數(shù)進(jìn)行傳遞。apply方法的個(gè)參數(shù)將會(huì)顯式設(shè)置this的取值。
結(jié)語(yǔ)
希望您在文中有所收獲。現(xiàn)在你可以使用文中介紹的絕招（bind方法，apply方法，call方法，以及把this賦值給 一個(gè)變量）來(lái)對(duì)付跟this相關(guān)的任何問(wèn)題。
正如已經(jīng)了解到的，this在上下文改變、被作為回調(diào)函數(shù)使用、被不同的對(duì)象調(diào)用、或者方法被借用的情況下，this將一直指向調(diào)用當(dāng)前方法的對(duì)象。
本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn)， 并不代表本站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)，本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺(tái)，網(wǎng)站上部分文章為轉(zhuǎn)載，并不用于任何商業(yè)目的，我們已經(jīng)盡可能的對(duì)作者和來(lái)源進(jìn)行了通告，但是能力有限或疏忽，造成漏登，請(qǐng)及時(shí)聯(lián)系我們，我們將根據(jù)著作權(quán)人的要求，立即更正或者刪除有關(guān)內(nèi)容。本站擁有對(duì)此聲明的最終解釋權(quán)。
