JavaScript 变量未定义与未定义

Question

我有一个附加了以下 JavaScript 的 HTML 页面。

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

在控制台中我得到“Uncaught ReferenceError: box is not defined”

当我把它改成:

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() 报告 undefined，这是变量存在但尚未初始化时发生的情况)。

您的第一个示例不使用 var，因此没有提升，所以在您执行 alert(box) 时，根本没有名为 box，因此您会得到 Uncaught ReferenceError 。

SO这里有很多很多帖子描述了吊装的细节。你可以在这里看到一长串:https://stackoverflow.com/search?q=javascript+variable+hoisting您可以在其中找到变量提升的进一步说明。

注意:函数声明也被提升，因此您找到的一些帖子将是关于函数声明而不是变量声明，尽管概念几乎相同。