[英]Object property called with dot notation showing console.log 'undefined'
fairly new to Javascript. Javascript 相当新。
Can I please get an explanation why object property of displayMyList when accessed with dot notation logs as 'undefined' but when put in a function it works fine.我能否解释一下为什么 displayMyList 的 object 属性在使用点符号日志作为“未定义”访问时,但是当放入 function 时它工作正常。 Why does it show undefined with just the console log?
为什么仅使用控制台日志显示未定义? Why doesn't it get displayed and why does it need a function to do so.
为什么它不显示,为什么需要 function 来显示。
Here's the code.这是代码。
var toDoList = {
// Holding the List
myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
// Displaying the List
displayMyList: console.log(this.myList)
}
This will display it as 'undefined' when I try to access the object property displayMyList with dot notation.当我尝试使用点符号访问 object 属性 displayMyList 时,这会将其显示为“未定义”。 However when a method is used it displays the list fine.
但是,当使用一种方法时,它会很好地显示列表。 I am wondering why is that?
我想知道为什么会这样?
var toDoList = {
// Holding the List
myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
// Displaying the List
displayMyList: function(){
console.log(this.myList)
}
}
First of all, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this首先,查看: 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)
}
There are a couple problems here with your first example above.上面的第一个示例存在几个问题。
displayMyList
to the RETURN VALUE of console.log(this.myList)
.displayMyList
的属性设置为console.log(this.myList)
的返回值。 console.log() does not return any value (see: https://developer.mozilla.org/en-US/docs/Web/API/Console/log ) so the value being assigned to displayMyList
will always be undefined
. displayMyList
的值将始终为undefined
。this
refers to the global this
unless it has otherwise been set to another context. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis . So you'll be looking at the property myList
of globalThis (or otherwise what this
is bound to in that context).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)
}
};
This fixes those, you are:这解决了这些问题,您是:
toDoList
being this
.toDoList
的上下文中运行它this
。 Note how the use of function
keyword here rebinds this
to the containing object.请注意此处使用
function
关键字如何将this
重新绑定到包含 object。
function
keyword, eg displayMyList: () => console.log(this.myList),
it would also not work because arrow functions do not rebind this
.function
关键字的情况下定义了 function,例如displayMyList: () => console.log(this.myList),
它也将不起作用,因为箭头函数不会重新绑定this
。 See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functionsfunction
keyword.function
关键字。 If you called the function in a different way, it would also not work.// Won't work
const x = toDoList.displayMyList;
x();
// Won't work
toDoList.displayMyList.call(globalThis);
// Won't work
toDoList.displayMyList.apply({});
You'll want to use an object method to log your list您需要使用object 方法来记录您的列表
var toDoList = { // Holding the List myList: ['List1', 'List2', 'List3', 'List4', 'List5'], // Displaying the List displayMyList() { console.log(this.myList) }, } toDoList.displayMyList()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.