Javascript 提升 - 我们如何访问某些变量？

Question

我有两个关于吊装的问题：

根据我的理解，函数声明的提升方式是它们到达最顶部，甚至高于变量声明。

如果我们有这个代码：

function fn() {
  callback();
}

function callback() {
  console.log('why does this show');
}

我不明白这是如何工作的，因为这两个函数都被提升到顶部（这有效地生成了已经存在的相同代码）。但是回调仍然是在fn下面创建的，我不明白为什么我们可以在fn中访问它。我的猜测是，这与顶级对象能够相互访问有关，无论词汇位置如何。

同样：

var a = 10;
function fn() {
  console.log(a);
}
fn();

这是如何运作的？因为我理解提升的方式使得函数看起来应该被提升到 var a 之上，这使得变量看起来应该在函数中始终不可访问。

Answer 1

我们可以深入探讨这个问题，但我想尝试简要解释一下你的示例是如何工作的。

每当 JavaScript 引擎创建执行上下文（也称为调用堆栈）时，无论是通过全局范围内的函数还是代码，它都会创建一个词法环境。这是一种数据结构，它通过使用引用来保存有关其自身范围内或来自其父范围的变量和函数的名称/值对的集合。

关于你的第一个例子。这两个函数都被添加到全局执行上下文中。如果您最初在第一个示例中调用

fn()

。然后它将把

callback()

添加到

fn()

的调用堆栈中并相应地执行它。因此，在这种情况下，函数的顺序并不重要。

你的第二个例子是不同的情况。执行上下文知道您正在引用全局变量，因此添加对词法环境的引用，使其能够在内部使用该变量

fn()

。

这可能很难理解。有大量与提升、作用域、词法环境和执行上下文相关的资源，因此请务必检查这些资源。 :)

Answer 2

这是因为我们的 Javascript 引擎如何解析和编译代码。

我不是专家，但第一个文件中的 V8（JS 的 Chorme 引擎）获取所有变量和函数名称并存储所有函数引用。所以，你可以在“声明”之前“使用”一个函数，因为 JS 知道该函数在哪里。

某些语言，甚至 C++，你都可以做到这一点，这是一个很好的功能:)