相同的脚本,IE与Firefox下的不同输出,为什么?

时间:2016-08-09 07:56:34

标签: javascript

在某处发现了这段代码:

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

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

只是有兴趣知道为什么它和正确的输出应该是什么?

1 个答案:

答案 0 :(得分:4)

你显然是在全球范围内运行它。使用var声明的全局变量将成为全局对象的属性。 1 在浏览器上,该对象为windowwindow已经有一个名为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);
})();

1 相反,使用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 + ")");