JavaScript 变量未定义与未定义

Question

我有一个带有以下 JavaScript 的 HTML 页面。

alert(box);
box = "Thinking outside the box";

在控制台中我得到“未捕获的引用错误：未定义框”

当我将其更改为：

alert(box);
var box = "Thinking outside the box";

警报被调用并显示未定义。我需要能够解释这一点，我对为什么会发生这种情况有一个模糊的想法。我知道当我使用 var 时，JavaScript 在执行警报之前就知道该变量存在，但不一定为它赋值？？我离这儿很远吗？需要一些帮助来理解这一点。

Answer 1

当您使用var 定义变量时，变量的声明被“提升”到作用域的顶部，因此该变量是为整个作用域定义的。变量的初始化（为其分配初始值）保持在代码中的相同位置。

因此，在您的第二个示例中，当您执行 alert(box) 时，变量 box 已经被声明，因为提升了 var 语句。你的第二个例子：

alert(box);
var box = "Thinking outside the box";

基本上相当于这个（box变量的声明被提升到了作用域的顶部）：

var box;
alert(box);
box = "Thinking outside the box";

这使得 box 变量在您的 alert(box) 语句之前声明（尽管未初始化），因此您得到的结果与正在声明的变量一致，但还没有值（alert() 报告 @987654332 @ 这是当变量存在但尚未初始化时发生的情况）。

您的第一个示例没有使用var，因此没有提升，因此在您使用alert(box) 的地方，根本没有名为box 的变量，因此您得到了uncaught reference error。

这里有很多关于 SO 的帖子描述了吊装的细节。你可以在这里看到一个很长的列表：https://stackoverflow.com/search?q=javascript+variable+hoisting，在那里你可以找到关于变量提升的进一步解释。

注意：函数声明也被提升了，所以你发现的一些帖子将是关于函数声明而不是变量声明，尽管概念几乎相同。

Answer 2

这与变量提升有关。这意味着，变量声明（以及一般的声明）在任何代码执行之前被处理，在代码中的任何地方声明一个变量等同于在顶部声明它。这也意味着一个变量在声明之前就可以被使用。

当您执行以下操作时：

alert(box)
var box = "Thinking outside the box"

这被隐式理解为：

var box;
alert(box);
box = "Thinking outside the box"

在你的第一种情况下，你没有变量声明，因此没有被提升，此时框是undefined

为什么会这样？

正如 Stoyan Stefanov 在他的“JavaScript 模式”一书中所解释的，提升是 JavaScript 解释器实现的结果：

为了完整起见，让我们在实际实现时提一下 级别的事情要复杂一些。有两个阶段 代码处理，其中变量、函数声明和形式 参数是在第一阶段创建的，即 解析和输入上下文。在第二阶段，阶段 运行时代码执行、函数表达式和不合格 创建标识符（未声明的变量）。但是为了实用 目的，我们可以采用吊装的概念，其实并不是 由 ECMAScript 标准定义，但通常用于描述 行为。

- Stoyan Stefanov，“JavaScript 模式”

作为旁白，链接来自 Safe Shepherd 的 this 文章。