Свойство объекта, вызываемое с точечной нотацией, показывает console.log 'undefined'

Question

довольно новый для Javascript.

Могу ли я получить объяснение, почему свойство объекта displayMyList при доступе с журналами точечной нотации как 'undefined', но при добавлении функции оно работает нормально. Почему отображается undefined только в журнале консоли? Почему он не отображается и почему для этого нужна функция.

Вот код.

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

Это будет отображаться как «undefined» при попытке доступа свойство объекта 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, если иное не было установлено для другого контекста. См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis. Итак, вы будете смотреть на свойство myList globalThis (или иначе, что this связано с этим контекстом).

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

Это исправляет те, вы:

• Назначение displayMyList будет ФУНКЦИЕЙ, которую вы запустите позже в контексте toDoList, являющегося this.

Обратите внимание, как использование ключевого слова function здесь повторно связывает this с содержащим объектом.

• Если вы определили функцию без ключевого слова function, например displayMyList: () => console.log(this.myList),, она также не будет работать, потому что стрелочные функции не связываются заново this. См.: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• Аналогично, даже если вы использовали ключевое слово function. Если вы вызвали функцию другим способом, она ld тоже не работает. Примеры ниже:

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

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

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

Answer 2

Вы захотите использовать метод объекта для регистрации вашего списка

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


toDoList.displayMyList()