首頁 > 文章 > web前端 > 實例解析Js中的this

實例解析Js中的this

不言原創: 2018-04-10 14:17:491431瀏覽

這篇文章給大家分享的內容是關於實例解析Js中的this，有需要的朋友可以參考一下

零從一個例子說起

前幾天在看面試題的時候看到了這樣一段程式：

obj = {
  name: &#39;a&#39;,
  getName: function () {
    console.log(this.name);
  }
};

var fn = obj.getName;obj.getName();fn();

要求問題是這裡fn()執行的結果和執行時this的指向問題。以下結合這個例子與其中的疑問重新總結一下this的使用。

一this的執行環境

this的指向要根據其執行環境來決定，主要有以下幾種情況：

1 全域上下文環境

全域環境即在任何函數的外部，使用this，則this都指涉全域物件。如在瀏覽器中：

this === window    // true

2 函數上下文環境

在函數上下文環境，即函數內部呼叫使用this，取決於this的呼叫方式。

2.1 簡單呼叫

在簡單呼叫時，函數中的this指向全域對象，例如：

function myFun() {
   console.log(this === window);
}

myFun();    // true

上面這個例子中直接呼叫了函數myFun，其中的this就等於全域物件window。
其中的原理就是在宣告myFun這一函數時，它作為全域物件的一個屬性存在。所以直接使用此函數時，即相當於調用了window.myFun()，即其作為window的屬性被調用時this即指向window。

在瀏覽器中調試這段程式能更清楚的驗證：
實例解析Js中的this

#2.2 作為物件的方法

當函數作為物件的方法被呼叫時，其this即指向這個物件。以一開始的例子來說，其執行obj.getName()時，函數中的this即指向了obj這個物件。所以輸出a。
但是當我們將這個函數單獨分離開，把一開始的例子改變一下：

function myFun() {
  console.log(this.name);
}var obj = {
  name: &#39;a&#39;,
  getName: myFun
};

obj.getName();    // avar obj2 = {
  name: &#39;b&#39;,
  fun: myFun
};

obj2.fun();   // b

從這個例子可以看出，this的指向完全取決於最靠近的成員引用，將函數綁定在哪個對象，哪個引用上，則this就有不同的指向。在上例中我們將帶有this的函數分別綁定到了不同的物件上作為其方法，則其this對應著便綁定到不同的物件上，this.name的值便不同。
同理，當我們直接執行myFun()時，此函數即作為全域物件window的一個屬性來呼叫。所以找不到myName屬性，輸出undefined。 (因為全域物件window有預設屬性name為空字串，此處使用myName作為範例)

function myFun() {
  console.log(this.myName);
}
myFun();    // undefined

最後，解釋一開始的例子，將obj.getName賦值給了fn，所以，執行fn時即相當於執行了 window.fn()，也就是這個一開始初始化為obj的屬性的匿名函數被綁定到了window的fn屬性上，所以其this指向window。
由window的name屬性為空字串，所以輸出為空。