Javascript - 使用括号属性检索对象属性并获得未定义
我正在学习使用构造函数方法创建 Javascript 对象，但我无法理解其中一个示例中构造函数的一个小行为。
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
function User(name,age){
this.name=name;
this.age=age;
}
var user = new User('Daniel',45);
document.getElementById("demo").innerHTML = user[name]; // Return undefined
document.getElementById("demo").innerHTML = user["name"]; // Return Daniel.
document.getElementById("demo").innerHTML = user[age]; // Retutn nothing. Blank
document.getElementById("demo").innerHTML = user["age"]; // Return 45
</script>
</body>
</html>
我读到可以使用点运算符或括号运算符访问对象属性。这里的括号运算符似乎工作正常。现在我无法理解这里的两件事。
user[name]正在回归undefined。为什么undefined？
user[age]什么都不返回。为什么它undefined不像以前的情况那样返回？我在这里想念什么？
达令说4回答
-
临摹微笑
当你这样做user[name]这会查找存储在name变量中的属性。例如，如果你有const name = 'foo'; const result = user[name];这相当于：const result = user.foo;因为foo存储在name变量中。同样的事情正在发生age。相反，当您使用引号时，解释器不会查找变量名，它只使用纯字符串：const result = user['foo']相当于const result = user.foo;但是，请记住：最好避免使用该name变量，因为在顶层，它window.name必须始终是一个字符串，如果您不期望它可能会导致奇怪的错误。 -
慕斯王
当你做 user[name]你真正在做的事情是传递一个名为 name 的变量，因为你没有声明一个名为 name 的变量，你将得到未定义。当您正在做user["name"]您正在做的事情时，您正在告诉您要访问name对象内部的密钥。你也可以user.name它会返回相同的东西user['name'] -
MYYA
问题是当您编写user[name]（假设名称为Daniel）时，您实际上是在尝试访问其键为Daniel有效键的值。如果这种情况Daniel是键的值name。尝试这样做。document.getElementById("demo").innerHTML = user.name; // Return undefineddocument.getElementById("demo").innerHTML = user["name"]; // Return Daniel.document.getElementById("demo").innerHTML = user.age; // Return nothing. Blankdocument.getElementById("demo").innerHTML = user["age"]; 使用.name而不是[name]获取键的值name。 -
猛跑小猪
您没有定义任何名称和年龄变量，因此user[name]和user[age]将是未定义的。您需要定义变量var name = "name"并使用user[name]如下<html><body><h2>JavaScript Objects</h2><p id="demo"></p><script> function User(name,age){ this.name=name; this.age=age; } var user = new User('Daniel',45); var name = "name"; var age = "age"; document.getElementById("demo").innerHTML = user[name]; // Return undefined document.getElementById("demo").innerHTML = user["name"]; // Return Daniel. document.getElementById("demo").innerHTML = user[age]; // Retutn nothing. Blank document.getElementById("demo").innerHTML = user["age"]; // Return 45 </script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript