使用变量“名称”不适用于 JS 对象

Question

在这个小sn-p中可以看到行为（将其作为全局脚本执行）：

var name = {};
name.FirstName = 'Tom';
alert(name.FirstName);

警报在 Chrome 中生成 undefined，但在 IE 和 Firefox 中有效。当我这样做时，我也会得到一个奇怪的值

alert(name);

Answer 1

window.name 有特殊用途，应该是一个字符串。 Chrome 似乎将其显式转换为字符串，因此var name = {}; 实际上最终将给全局变量name（即window.name）一个值"[object Object]"。由于它是一个原始的，属性 (name.FirstName) 不会“粘住”。

要解决此问题，请勿将name 用作全局变量。

Answer 2

您的name 变量实际上是window.name，因为用var 声明的顶级变量附加到全局对象。

HTML5 规范requires that window.name is a DOMString。这意味着window.name的值可以only be a sequence of characters，而不是对象。

在 Chrome 中，尝试使用 window.name 存储除原始字符串之外的任何内容都会将值强制转换为原始字符串。例如：

window.name = {};
window.name === "[object Object]"; // true

您可以通过使用不在顶级范围内的name 变量来避免此问题：

(function() {
    var name = {};
    // this `name` is not `window.name`
    // because we're not in the top-level scope

    console.log(name);
})();

Answer 3

使用 ES6+，您可以将代码编写为 let name 或 const name。这不会分配它或尝试覆盖window.name。更多关于 here.

let name = {};
name.FirstName = 'Tom';
alert(name.FirstName);

Answer 4

window.name 用于设置窗口的名称，由于窗口名称只能是字符串，所以您设置为window.name 的任何内容都会转换为字符串。字符串，作为原始值，不能有属性。解决方案是使用不同的变量名或不同的范围。

或者，如果您首先拥有此代码，则可以随意使用window.name。我根本不推荐这个，但是，只是作为概念证明：

(function () {
    var _name;
    window.__defineGetter__('name', function () {
        return _name;
    });
    window.__defineSetter__('name', function (v) {
        _name = v;
    });
})();

此外，您应该使用{} 代替new Object。除了更简洁之外，它也更高效、更明确。