javascript - 使用显示 console.log 'undefined' 的点表示法调用的对象属性

Question

对 Javascript 来说相当新。

我能否解释一下为什么使用点符号访问时 displayMyList 的对象属性日志为“未定义”，但是当放入函数时它工作正常。为什么仅使用控制台日志显示未定义？为什么它不显示，为什么它需要一个函数来显示。

这是代码。

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

当我尝试使用点符号访问对象属性 displayMyList 时，这会将其显示为“未定义”。但是，当使用一种方法时，它会很好地显示列表。我想知道为什么会这样？

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

标签： javascriptarraysobjectmethods

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，除非它已被设置为另一个上下文。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript /Reference/Global_Objects/globalThis . 因此，您将查看myListglobalThis 的属性（或其他this在该上下文中绑定的属性）。

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

这可以解决这些问题，您是：

• 将 displayMyList 指定为一个 FUNCTION，您稍后将在toDoListbeing的上下文中运行它this。

请注意function此处关键字的使用如何重新绑定this到包含对象。

• 如果你定义了没有function关键字的函数，例如displayMyList: () => console.log(this.myList),它也不会工作，因为箭头函数不会重新绑定this。请参阅：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• 同样，即使您使用了function关键字。如果您以不同的方式调用该函数，它也将不起作用。以下示例：

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

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

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