Object 屬性以點表示法調用，顯示 console.log 'undefined'

Question

Javascript 相當新。

我能否解釋一下為什么 displayMyList 的 object 屬性在使用點符號日志作為“未定義”訪問時，但是當放入 function 時它工作正常。 為什么僅使用控制台日志顯示未定義？ 為什么它不顯示，為什么需要 function 來顯示。

這是代碼。

var toDoList = {
// Holding the List 
myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
// Displaying the List
displayMyList: console.log(this.myList)
}

當我嘗試使用點符號訪問 object 屬性 displayMyList 時，這會將其顯示為“未定義”。 但是，當使用一種方法時，它會很好地顯示列表。 我想知道為什么會這樣？

 var toDoList = {
    // Holding the List 
    myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
    // Displaying the List
    displayMyList: function(){
  console.log(this.myList)
}
    }

Answer 1

首先，查看： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

---

var toDoList = {
  // Holding the List 
  myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
  // Displaying the List
  displayMyList: console.log(this.myList)
}

上面的第一個示例存在幾個問題。

• 首先，您在 toDoList 中將一個名為displayMyList的屬性設置為console.log(this.myList)的返回值。 console.log() 不返回任何值（請參閱： https://developer.mozilla.org/en-US/docs/Web/API/Console/log ）因此分配給displayMyList的值將始終為undefined 。
• 其次，它將評估 this 並查看它返回的內容（此時this指的是全局this除非它已被設置為另一個上下文。請參閱https://developer.mozilla.org/en-US/docs/Web /JavaScript/Reference/Global_Objects/globalThis 。所以您將查看 globalThis 的屬性myList （或者在該上下文中this綁定的內容）。

var toDoList = {
  // Holding the List 
  myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
  // Displaying the List
  displayMyList: function() {
    console.log(this.myList)
  }
};

這解決了這些問題，您是：

• 將 displayMyList 指定為 FUNCTION ，稍后您將在toDoList的上下文中運行它this 。

請注意此處使用function關鍵字如何將this重新綁定到包含 object。

• 如果您在沒有function關鍵字的情況下定義了 function，例如displayMyList: () => console.log(this.myList),它也將不起作用，因為箭頭函數不會重新綁定this 。 請參閱： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• 同樣，即使您使用了function關鍵字。 如果您以不同的方式調用 function，它也不起作用。 以下示例：

// Won't work
const x = toDoList.displayMyList;
x();

// Won't work
toDoList.displayMyList.call(globalThis);

// Won't work
toDoList.displayMyList.apply({});

Answer 2

您需要使用object 方法來記錄您的列表

 var toDoList = { // Holding the List myList: ['List1', 'List2', 'List3', 'List4', 'List5'], // Displaying the List displayMyList() { console.log(this.myList) }, } toDoList.displayMyList()