在某处发现了这段代码:
function Name1(name){
this.name = name;
}
var name = new Name1("11");
document.write(name.name);
Output:
IE11 - "11"
Firefox43 - "undefined"
只是有兴趣知道为什么它和正确的输出应该是什么?
答案 0 :(得分:4)
你显然是在全球范围内运行它。使用var
声明的全局变量将成为全局对象的属性。 1 在浏览器上,该对象为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);
})();
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 + ")");