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()