Javascript 提升 : difference between calling x and window. x

Question

谁能解释以下场景中的提升行为？

alert(x);
var x = 10;

Result: alert-undefined

在下面的例子中，x 不是使用“var”关键字定义的 - 因此附加到全局范围。

alert(x);
x = 10; // not given a var

Result: error

如果我们用 window.x 替换 x，我们会收到未定义的警报!

alert(window.x); // calling the variable with window namespace
x = 10; // not given a var

Result: alert-undefined

您能解释一下为什么使用变量名 (x) 和窗口命名空间 (window.x) 调用变量(附加到全局范围)是不同的吗？

Answer 1

术语“提升”经常被误解为某些语句被移动到其执行上下文的顶部，这不是实际发生的情况，也是应该避免使用该术语的原因。

实际发生的是所有声明都先处理，所以任何用 var 声明的变量(以及任何由函数声明创建的函数)在任何代码执行之前就已经存在。然后开始执行代码。

所以变量 x 在任何代码执行之前被创建并赋值 undefined (根据 ECMA-262)，然后在执行期间，它可能被赋值一些值(value)。

所以在这种情况下:

alert(x);
var x = 10;

x 在 alert 被调用时存在，但尚未被分配一个 undefined 以外的值。

在:

alert(x);
x = 10;

x 未声明，因此在调用 alert 时它不存在，因此出现错误。在警报之后(如果代码继续运行)，对 x 的赋值将创建名为 x 的全局(浏览器中的窗口)对象的属性并为其赋值共 10 个。

在:

alert(window.x);
x = 10;

ECMAScript 的一个怪癖是全局变量也可以作为全局对象的属性使用。表达式 window.x 试图读取窗口对象的 x 属性。由于不存在这样的属性，返回值是undefined。然后下一条语句将 x 创建为全局变量，因此 window.x 现在存在且值为 10。