使用变量 "name" 不适用于 JS 对象

Question

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

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规范要求window.name是DOMString。这意味着 window.name 的值只能是字符序列，而不能是对象。

在 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 。更多关于这一点的信息 这里.

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 。除了更简洁之外，它还更高效、更明确。