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（对象）”（Chrome也是如此，它也正确地为您的原始示例输出undefined），而上面带有var（{ {3}}）输出“undefined（string）”：

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

相同的脚本，IE与Firefox下的不同输出，为什么？

1 个答案: