精通JavaScript的this關鍵字，javascriptthis

精通JavaScript的this關鍵字，javascriptthis

JS中的this關鍵字讓很多新老JS開發人員都感到困惑。這篇文章將對this關鍵字進行完整地闡述。讀完本文以後，您的困惑將全部消除。您將學會如何在各種不同的情形正確運用this。

我們和在英語、法語這樣的自然語言中使用名詞一樣地使用this。比如，“John飛快地跑著，因為他想追上火車”。請注意這句話中的代指John的代名詞“他”。我們原本也可以這樣表達，“John飛快地跑著，因為John想追上火車”。按照正常的語言習慣，我們並不按第二種方式表達。如果我們真按第二種方式說話，我們的家人和基友一定會把我們當成怪胎。說不定不止家人，甚至連我們的酒肉朋友和同事都會遠離我們。類似地，在JS中，我們把this關鍵字當成一種捷徑，或者說是引用（referent）。this關鍵字指向的是當前上下文（context，下文中將會對此作專門的解釋）的主體（subject），或者當前正在被執行的代碼塊的主體。

考慮以下代碼：

var person = {   firstName: "Penelope",   lastName: "Barrymore",   fullName: function () {   // 正如我們在文中提到的使用“他”作為代名詞一樣，我們在這裡使用this   console.log(this.firstName + " " + this.lastName);   //我們其實也可以這樣寫：   console.log(person.firstName + " " + person.lastName);   }  }

如果我們使用person.firstName和person.lastName，某些情況下代碼會變得模稜兩可。例如，全域變數中有一個跟person同名的變數名。這種情況下，如果我們想要讀取person.firstName的值，系統將有可能從全域變數的person變數中讀取firstName屬性（property）。這樣一來，我們調試代碼的時候很難發現錯誤。所以this並不只起到美化代碼的作用，同時也是為了保證程式的準確性。這種做法實際上和前面講到的“他”的用法一樣，使得我們的代碼更加清晰。“他”所引用的正是句首的“John”。

正如代名詞“他”被用來代指句中的先行詞（先行詞就是代名詞所指示的名詞），this關鍵字以同樣的方式來引用當前方法（function，也可以稱為函數）所綁定（bound）的對象。this不只引用對象，同時包含了對象的值。跟先行詞一樣，this也可以被理解成在上下文中用來引用當前對象（又叫作“先行詞對象”）的捷徑（或者來適度減少歧義的替代品）。我們遲些會專門講解“上下文”。

this關鍵字基本理論

首先我們得知道，對象(Object)有屬性集（properties），所有的方法（function）也有屬性集。運行到某個方法的時候就有了一個this屬性—一個儲存了調用該方法（準確地說是使用了this關鍵字的方法）的對象的值的變數。

this關鍵字始終指向一個對象並持有這個對象的值，儘管它可以出現在全域範圍（global scope）方法（函數）以外的地方，但它通常出現在方法體中。值得注意的是，如果我們使用strict 模式（strict mode），並在全域方法（global functions）或者沒有綁定到任何對象的匿名方法中使用this關鍵字時，this將會指向undefined。

this被用在方法體中，比如方法A，它將指向調用方法A的對象的值。並不是任何情況我們都能找到調用方法A的對象名，這時候就用this來訪問調用方法A的對象所擁有的方法和屬性。this確實只是一個用來引用先行詞—調用方法的對象—的捷徑。

我們來仔細體會下面這段使用this的代碼。

var person = {  firstName: "Penelope",  lastName: "Barrymore",  //this用在showFullName方法中，而showFullName定義在person對象中，由於調用showFullName的是person這個對象，所以this擁有person的值  showFullName: function() {    console.log(this.firstName + " " + this.lastName);  }}person.showFullName(); // 結果：Penelope Barrymore

再考慮下面這段使用了this的jQuery樣本。

//這是一段很簡單的jQuery代碼$("button").click(function(event) {  // $(this) 會指向$("button")對象  // 因為$("button")對象調用click方法  console.log($(this).prop("name"));});

我想詳細地說一下上面這個jQuery樣本:$(this)的使用，這是this的jQuery版本，它用於匿名方法中，這個匿名方法在button的單擊事件裡執行。這裡之所以說$(this)被綁定到button對象，是因為jQuery庫把$(this)綁定到調用click方法的對象上。因此，儘管$(this)被定義在一個自身無法訪問“自身”變數的匿名方法裡，$(this)仍會指向button對象。

請注意，button是一個HTML頁面的DOM元素，它同時是一個對象：在上面的例子中，因為我們把它封裝在了jQuery的$()方法裡，所以它是一個jQuery對象。

this關鍵字的核心

下面這條規則可以協助你徹底搞懂this關鍵字：如果一個方法內部使用了this關鍵字，僅當對象調用該方法時this關鍵字才會被賦值。我們估且把使用了this關鍵字的方法稱為“this方法”。

儘管看上去this引用了它在代碼中所存在於的對向，事實上在方法被調用之前它並沒有被賦值，而賦給它的值又嚴格地依賴於實際調用“this方法”的對象。this通常會被賦予調用對象的值，下面有一些特殊情況。

全域範圍裡的this

在全域域中，代碼在瀏覽器裡執行，所有變數和方法都屬於window對象。因而當我們在全域域中使用this關鍵字的時候，它會被指向（並擁有）全域變數window對象。如前所述，strict 模式除外。window對象是JS一個程式或一張網頁的主容器。

因而：

var firstName = "Peter",lastName = "Ally";function showFullName() {  //在這個方法中，this將指向window對象。因為showFullName()出現在全域域裡。  console.log(this.firstName + " " + this.lastName);}var person = {  firstName: "Penelope",  lastName: "Barrymore",  showFullName: function() {    //下面這行代碼，this指向person對象，因為showFullName方法會被person對象調用。    console.log(this.firstName + " " + this.lastName);  }}showFullName(); // Peter Ally//window對象包含了所有的全域變數和方法，因而會有以下輸出window.showFullName(); // Peter Ally//使用了this關鍵字的showFullName方法定義在person對象裡，this關鍵字指向person對象，因以會有以下輸出person.showFullName(); // Penelope Barrymore

對付this有絕招

當方法內使用了this關鍵字時，這幾種情況最容易引起誤解：方法被借用；把方法賦值給某個變數；方法被用作回呼函數（callback），被作為參數傳遞；this所在的方法是個閉包（該方法是一個內部方法）。針對這幾種情況，我們將逐一攻破。在此之前，我們先簡單介紹一下“上下文”(context)。

JS當中的上下文跟這句話中的主語(subject)類似：“John是贏家，他還了錢”。這句話的主語是John。我們也可以說這句話的上下文是John，因為我們在這句話中關注的是John，即使這裡有一個“他”字來代指John這個先行詞。正如我們可以使用分號來切換句子的主語一樣，通過使用不同的對象來對方法進行調用，當前的內容物件同樣可以被切換。

類似地，以下JS代碼：

var person = {  firstName: "Penelope",  lastName: "Barrymore",  showFullName: function() {    // 上下文    console.log(this.firstName + " " + this.lastName);  }}//使用person對象調用showFullName的時候，上下文是person對象//showFullName內部的this指向person對象person.showFullName(); // Penelope Barrymore//如果我們用不同的對象來調用showFullNamevar anotherPerson = {  firstName: "Rohit",  lastName: "Khan"};//我們可以使用apply方法來顯式設定this的值—遲些我們會講到apply方法//this會指向任何一個調用了this方法的對象，因此會有以下輸出結果person.showFullName.apply(anotherPerson); // Rohit Khan//所以現在的上下文是anotherPerson，因為anotherPerson通過藉助使用apply方法間接調用了person的showFullName方法

現在我們開始正式討論應付this關鍵字的絕招，例子裡包含了this所引發的錯誤以及解決方案。

1.當this被用作回呼函數傳入其它方法

當我們把一個使用了this關鍵字的方法當成參數作為回函數的時候，麻煩就來了。例如：

//以下是一個簡單的對象，我們定義了一個clickHandler方法。我們想讓這個方法在頁面上某個button被單擊時執行。var user = {  data: [{    name: "T. Woods",    age: 37  },  {    name: "P. Mickelson",    age: 43  }],  clickHandler: function(event) {    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 隨機返回0或1    //下面這行代碼會從數組data裡隨機列印姓名和年齡    console.log(this.data[randomNum].name + " " + this.data[randomNum].age);  }}//button對象被jQuery的$方法封裝，現在變成一個jQuery對象//所以輸出結果是undefined，因為button對象沒有data這個屬性$("button").click(user.clickHandler); // 無法讀取未定義的屬性

上面的代碼中，我們把user.clickHandler當成回呼函數傳入$(“button”)對象的click事件，user.clickHandler中的this將不再指向user對象轉。誰調用了這個包含this的方法this就會指向誰。真正調用user.clickHandler的對象是button對象—user.clickHandler會在button對象的單擊方法裡執行。

注意，儘管我們使用user.clickHandler來調用clickHander方法（我們也只能這麼做，因為clickHandler是定義在user對象上的），clickHandler方法本身會被現在被this所指向的內容物件所調用。所以this現在指向的是$(“button”)對象。

當上下文改變時—當我們在其它對象而非原對象上執行某個方法的時候，顯然this關鍵字不再指向定義了this關鍵字的原對象。

解決方案：

由於我們真的很想讓this.data指向user對象的data屬性，我們可以使用Bind/ Apply/ Call等方法來強制改變this所指向的對象。本系列的其它篇目將專門對Bind/ Apply/ Call進行講解，文中介紹了如何在不同的情況強制改變this的值的方法。與其在本文大篇幅討論，我強烈建議大家直接去讀另外的篇目（譯者註：晚些時候放出這裡所說的“其它篇目”）。

為瞭解決前面代碼中的問題，我們可以使用bind方法。

針對下面這行代碼：

$ ("button").click (user.clickHandler);
我們可以用bind方法把clickHandler綁定的user對象上：

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43
2.閉包中的this

在內部方法中，或者說閉包中使用this，是另一個很容易被誤解的例子。我們必須注意的是，內部方法不能直接通過使用this關鍵字來訪問外部方法的this變數，因為this變數 只能被特定的方法本身使用。例如：

var user = {  tournament: "The Masters",  data: [{    name: "T. Woods",    age: 37  },  {    name: "P. Mickelson",    age: 43  }],  clickHandler: function() {    //在裡用this.data沒有太大問題，因為this指向的是user對象，data是user的一個屬性    this.data.forEach(function(person) {      //但是在這個匿名方法（作為參數被傳進forEach方法的這個方法）裡，this不再指向user對象      //內部方法無法訪問外部方法的this      console.log("What is This referring to? " + this); //輸出結果為：[object Window]      console.log(person.name + " is playing at " + this.tournament);      // T. Woods is playing at undefined      // P. Mickelson is playing at undefined    })  }}user.clickHandler(); // What is "this" referring to? [object Window]

因為匿名方法中的this不能訪問外部方法的this，所以在非strict 模式下，this指向了全域的window對象

解決方案：

在進入forEach方法之前，額外使用一個變數來引用this。

var user = {  tournament: "The Masters",  data: [{    name: "T. Woods",    age: 37  },  {    name: "P. Mickelson",    age: 43  }],  clickHandler: function(event) {    //為了捕獲this指向user對象時的值，我們把它賦值給另外一個變數theUserObj，後面我們可以使用theUserObj    var theUserObj = this;    this.data.forEach(function(person) {      //現在我們不用this.tournament了，我們用theUserObj.tournament      console.log(person.name + " is playing at " + theUserObj.tournament);    })  }}user.clickHandler();// T. Woods is playing at The Masters// P. Mickelson is playing at The Masters

正如下面的代碼，很多JS開發人員喜歡使用變數that來設定this的值。但我個人不太喜歡用that這個名字，我喜歡使用讓人一眼就能看懂this到底指向誰的那種名字，所以上面的代碼中我使用了theUserObj = this。

 // 這句代碼對大多數JS開發人員來說再常見不過了var that = this;

3.方法被賦值給某個變數

this關鍵字有時候很調皮，如果我們把一個使用了this關鍵字的方法賦值給一個變數，我們來看會有什麼有趣的事發生：

// data變數是一個全域變數
var data = [{
    name: "Samantha",
    age: 12
},
{
    name: "Alexis",
    age: 14
}];

var user = {
    // 而這裡的data是user的一個屬性
    data: [{
        name: "T. Woods",
        age: 37
    },
    {
        name: "P. Mickelson",
        age: 43
    }],
    showData: function(event) {
        var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 隨機產生1或0
        //這句話會從數組data裡隨機顯示人名和歲數
        console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
    }

}

// 把user.showData方法賦值給變數 showUserData
var showUserData = user.showData;

//執行showUserData方法，結果將 來自全域的data數組而非user對象的data屬性
showUserData(); // Samantha 12 (來自全域變數data)
//解決方案：通過使用bind方法來顯式設定this的值
//把showData方法綁定到user對象上
var showUserData = user.showData.bind(user);

//現在結果將來自user對象，因為this關鍵字已經被強制綁定到user對象上了
showUserData(); // P. Mickelson 43

4.借用方法帶來的問題

JS開發中，借用方法（borrowing methods）很常見。

我們來看下面的代碼：

//下面代碼中有兩個對象。其中一個定義了avg方法，另一個不包含avg的定義。我們用另一個對象來借用前一對象的avg方法。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的scores而來//不要執行下面的代碼，我們只是為了對這種情況進行說明。實際上我們想讓appController.avgScore仍然為null。gameController.avgScore = appController.avg();

avg方法的this關鍵字指向的是gameController對象，如果使用appController調用該方法，this將會指向appController(但事實上這並不是我們期望的結果，因為我們只想借用方法的實現邏輯而非具體的資料來源)。

解決方案：

為了保證gameController只借用appController的avg方法的邏輯，我們使用apply方法：

// 我們要使用apply方法，注意這裡傳入appController.avg方法的第二個參數appController.avg.apply(gameController, gameController.scores);//儘管avg方法是借來的，但是現在avgScore屬性已經被成功地應用到gameController上了。console.log(gameController.avgScore); // 46.4//appController.avgScore仍然是null，只有gameController的avgScore被更新了console.log(appController.avgScore); // null

gameController只借用了appController的avg方法，這時this將指向gameController，因為我們把gameController作為apply方法的第一個參數進行傳遞。apply方法的第一個參數將會顯式設定this的取值。

結語

希望您在文中有所收穫。現在你可以使用文中介紹的絕招（bind方法，apply方法，call方法，以及把this賦值給 一個變數）來對付跟this相關的任何問題。

正如已經瞭解到的，this在上下文改變、被作為回呼函數使用、被不同的對象調用、或者方法被借用的情況下，this將一直指向調用當前方法的對象。

您可能感興趣的文章:

• Javascript this關鍵字流量分析
• javascript this用法小結
• 有關js的變數範圍和this指標的討論
• js報錯 Object doesn''t support this property or method的原因分析
• js原生態函數中使用jQuery中的 $(this)無效的解決方案
• Javascript this 的一些學習總結
• javascript中onclick(this)用法介紹
• js綁定事件this指向發生改變的問題解決方案
• js中的this關鍵字詳解
• JS中的this變數的使用介紹