在物件字面值中使用「this」 - 現代 JavaScript 教學

這裡的函式 makeUser 回傳一個物件。

存取其 ref 的結果是什麼？為什麼？

          function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // What's the result?
        

解答：錯誤。

試試看

function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // Error: Cannot read property 'name' of undefined

這是因為設定 this 的規則不會查看物件定義。只有呼叫的時刻才有關係。

這裡 makeUser() 內部的 this 值為 undefined，因為它是以函式呼叫，而不是以「點」語法作為方法呼叫。

this 的值對整個函式而言只有一個，程式碼區塊和物件字面值不會影響它。

因此 ref: this 實際上會採用函式的目前 this。

我們可以改寫函式，並回傳具有 undefined 值的相同 this

function makeUser(){
  return this; // this time there's no object literal
}

alert( makeUser().name ); // Error: Cannot read property 'name' of undefined

如你所見，alert( makeUser().name ) 的結果與前一個範例中 alert( user.ref.name ) 的結果相同。

以下是相反的情況

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
}

let user = makeUser();

alert( user.ref().name ); // John

現在它可以運作，因為 user.ref() 是一個方法。而且 this 的值會設定為點 . 之前的物件。