作用域链和闭包：代码中出现相同的变量，JavaScript引擎如何选择|浏览器篇

理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的

那今天我们就来聊聊什么是作用域链，并通过作用域链再来讲讲什么是闭包。

首先我们来看下面这段代码：

function bar() {
    console.log(myName)
}
function foo() {
    var myName = " 极客邦 "
    bar()
}
var myName = " 极客时间 "
foo()

你觉得这段代码中的 bar 函数和 foo 函数打印出来的内容是什么？这就要分析下这两段代码的执行流程。

通过前面几篇文章的学习，想必你已经知道了如何通过执行上下文来分析代码的执行流程了。那么当这段代码执行到 bar 函数内部时，其调用栈的状态图如下所示：

从图中可以看出，全局执行上下文和 foo 函数的执行上下文中都包含变量 myName，那 bar 函数里面 myName 的值到底该选择哪个呢？

也许你的第一反应是按照调用栈的顺序来查找变量，查找方式如下：

1. 先查找栈顶是否存在 myName 变量，但是这里没有，所以接着往下查找 foo 函数中的变量。
2. 在 foo 函数中查找到了 myName 变量，这时候就使用 foo 函数中的 myName。

如果按照这种方式来查找变量，那么最终执行 bar 函数打印出来的结果就应该是“极客邦”。但实际情况并非如此，如果你试着执行上述代码，你会发现打印出来的结果是“极客时间”。为什么会是这种情况呢？要解释清楚这个问题，那么你就需要先搞清楚作用域链了

关于作用域链，很多人会感觉费解，但如果你理解了调用栈、执行上下文、词法环境、变量环境等概念，那么你理解起来作用域链也会很容易。所以很是建议你结合前几篇文章将上面那几个概念学习透彻。

其实在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为outer。

当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量， 比如上面那段代码在查找 myName 变量时，如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找。为了直观理解，你可以看下面这张图：

从图中可以看出，bar 函数和 foo 函数的 outer 都是指向全局上下文的，这也就意味着如果在 bar 函数或者 foo 函数中使用了外部变量，那么 JavaScript 引擎会去全局执行上下文中查找。我们把这个查找的链条就称为作用域链。

现在你知道变量是通过作用域链来查找的了，不过还有一个疑问没有解开，foo 函数调用的 bar 函数，那为什么 bar 函数的外部引用是全局执行上下文，而不是 foo 函数的执行上下文？

要回答这个问题，你还需要知道什么是词法作用域。这是因为在 JavaScript 执行过程中，其作用域链是由词法作用域决定的

原理拆解： 标识符解析从当前词法环境开始：先检查函数参数、局部声明及块级绑定，未命中时再沿外部环境引用逐层上溯，直到全局环境；全链路仍未找到，读取操作会抛出 ReferenceError。这里的外部引用表达声明嵌套关系，不表达调用栈关系。调用栈只记录执行先后，因此函数甲调用函数乙，不会让甲自动成为乙的外层作用域。

最小验证： 输入为两个并列声明的函数，验证 bar 读取的是全局变量，而不是调用者 foo 的局部变量。

const label = "global";

function bar() {
  console.log(label);
}

function foo() {
  const label = "foo-local";
  bar();
}

foo();

try {
  console.log(missingName);
} catch (error) {
  console.log(error.name);
}

关键行是 bar() 的声明位置：它与 foo 都位于全局，所以其外部环境指向全局环境。预期依次输出 global 和 ReferenceError，不会输出 foo-local。若把 bar 的声明整体移入 foo，查找链随声明嵌套改变，结果才会变为局部值。

边界与排查： let、const 在初始化前处于暂时性死区，此时即使外层存在同名变量，也不会越过当前绑定继续查找，而是直接抛出 ReferenceError；var 则有不同的创建和初始化时机。工程验证可在浏览器开发者工具中设置断点，查看 Scope 面板里的 Local、Closure、Script、Global 等层级，并逐层确认同名绑定首先在哪一级命中。