Javascript - 使用括号属性检索对象属性并获得未定义答案

【问题标题】：Javascript - retrieving object property using bracket property and getting undefinedJavascript - 使用括号属性检索对象属性并获得未定义
【发布时间】：2020-04-16 11:36:34
【问题描述】：

我正在学习使用构造函数方法创建 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？我在这里错过了什么？

【问题讨论】：

括号表示法的意思是，括号中有一个字符串，或任何可以计算为字符串的表达式。

标签： javascript

【解决方案1】：

当你这样做时

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 的形式存在，它必须始终是一个字符串，如果您不期望这可能会导致奇怪的错误它。

【讨论】：

嗯...“这会查找存储在 name 变量中的属性”现在对我来说很有意义，当我尝试访问它时，它给了我未定义的信息。那为什么我的年龄也没有定义呢？为什么我在做 user[age]; 时它是空白的？
你没有一个名为age的变量，所以它会抛出一个错误：age is not defined。相比之下，name 变量的存在是因为window.name（但它通常是空字符串） - 所以，在这种情况下，它不会抛出错误，但仍然不会给你你所期望的。
哇...现在我明白了。顺便问一下，这个 window.name 是什么？它是内置的吗？请告诉我更多关于它的信息。
你可以在这里阅读：developer.mozilla.org/en-US/docs/Web/API/Window/name

【解决方案2】：

问题是当您编写user[name]（假设名称为Daniel）时，您实际上是在尝试访问Daniel 键上的值，这是一个有效的键。如果这种情况下Daniel 将是name 的键值。尝试这样做。

document.getElementById("demo").innerHTML = user.name;     // Return undefined
document.getElementById("demo").innerHTML = user["name"];   // Return Daniel.
document.getElementById("demo").innerHTML = user.age;      // Return nothing. Blank
document.getElementById("demo").innerHTML = user["age"];

使用.name 而不是[name] 来获取name 键处的值。

【讨论】：

【解决方案3】：

当您执行user[name] 时，您真正要做的是传递一个名为 name 的变量，并且由于您没有声明一个名为 name 的变量，您将得到未定义。

当您在执行user["name"] 时，您正在执行的操作是在告诉您要访问对象内部的密钥name。

你也可以这样做

user.name

它会返回和user['name']一样的东西

【讨论】：

为什么在年龄检索中也没有发生同样的行为？我也没有定义年龄变量。
同样的事情适用于年龄和对象中的任何键。键的（名称和年龄）是对象内部的指针，因此您可以通过键找到您的值，而不是像数组一样，您可以通过索引找到您的值

【解决方案4】：

您没有定义任何名称和年龄变量，因此 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>

【讨论】：

是的，我看到那部分正在工作。请参阅下面的代码，我已经发布了我的查询。你能帮我解决这些问题吗？
您可以使用 name = "name" 设置变量或直接使用 user["name"]