javascript - 相同的脚本，在 IE 和 Firefox 下的输出不同，为什么？

Question

在某处找到这段代码:

function Name1(name){
    this.name = name;
}
var name = new Name1("11");
document.write(name.name);

Output:
IE11 - "11"
Firefox43 - "undefined"

只是想知道这是为什么以及正确的输出应该是什么？

Answer 1

您显然是在全局范围内运行它。用 var 声明的全局变量成为全局对象的属性。¹ 在浏览器中，该对象是 window。 window 已经有一个名为 name 的属性:它是窗口的名称(如果有的话)。在 Firefox 上，它只能是一个字符串，所以给它分配一个对象会被忽略； IE 显然更宽松(并且可以说，根据 HTML5 规范，这是错误的；name is defined as a DOMstring)。所以 name = new Name1("11") 最终成为 Firefox 上的空操作，而 name.name (读取 name 属性字符串)产生 undefined。

如果您更改变量的名称，您会在两种浏览器上获得相同的输出:

function Name1(name){
    this.name = name;
}
var x = new Name1("11");
console.log(x.name);

如果可以的话，像这样的冲突是避免在全局范围内运行代码的众多原因之一；将事物包装在作用域函数中:

(function() {
    function Name1(name){
        this.name = name;
    }
    var name = new Name1("11");
    console.log(name.name);
})();

---

¹ 相反，使用 let 声明的全局变量不会成为全局对象的属性，这立即引发了以下问题:什么以下脚本在 Firefox 上使用 let 的输出是什么？

// REQUIRES ES2015+ SUPPORT
function Name1(name){
    this.name = name;
}
let name = new Name1("11");
console.log(name.name + " (" + typeof name + ")");

令人满意的是，答案是它输出“11 (object)”(Chrome 也是如此，对于您的原始示例，它也正确输出 undefined)，而上面的 var ( https://jsfiddle.net/s1j11023/ ) 输出“未定义(字符串)”:

// REQUIRES ES2015+ SUPPORT
function Name1(name){
    this.name = name;
}
var name = new Name1("11");
console.log(name.name + " (" + typeof name + ")");