JavaScript 作用域链（Scope Chain）查找机制：底层是如何递归查找变量的

各位同仁，下午好。

今天，我们将深入探讨JavaScript中最核心、也最常被误解的机制之一：作用域链（Scope Chain）的查找机制。理解它，是掌握JavaScript变量解析、闭包原理以及优化代码性能的关键。我们将从底层原理出发，层层递进，剖析JavaScript引擎是如何在幕后“递归”查找变量的。

1. 作用域的基石：理解Lexical Environment与Execution Context

在深入作用域链之前，我们必须先打下基础。JavaScript中的作用域是词法作用域（Lexical Scope），这意味着函数的作用域在函数定义时就已经确定，而不是在函数调用时。这一特性是理解作用域链一切行为的根本。

每一次JavaScript代码的执行，都会在一个执行上下文（Execution Context，EC）中进行。EC是JavaScript引擎执行代码时的环境，可以看作是一个抽象的概念，它包含了当前代码执行所需的所有信息。

EC主要分为三种类型：

1. 全局执行上下文（Global Execution Context）：最顶层，在浏览器中通常是window对象，在Node.js中是global对象。它在JS引擎启动时创建。
2. 函数执行上下文（Function Execution Context）：每当一个函数被调用时，就会创建一个新的函数EC。
3. Eval函数执行上下文（Eval Function Execution Context）：当eval函数执行其内部代码时创建。

每个执行上下文都包含几个重要的组成部分，其中与作用域链最直接相关的是词法环境（Lexical Environment）。

1.1 词法环境（Lexical Environment）

词法环境是JavaScript作用域的核心抽象概念。它是一个用于存储标识符-变量映射关系的结构。简单来说，它记录了当前作用域内声明的所有变量和函数。

一个词法环境包含两个主要部分：

1. 环境记录（Environment Record）：

   • 这是一个实际存储变量和函数声明的地方。
   • 它维护着一个映射，将标识符（变量名、函数名）映射到它们对应的值。
   • 环境记录又可细分为：
     • 声明式环境记录（Declarative Environment Record）：用于存储函数声明、变量声明（var, let, const）以及函数参数。每个函数EC都有一个声明式环境记录。
     • 对象环境记录（Object Environment Record）：用于存储绑定到特定对象的属性。例如，在全局EC中，它会关联到全局对象（window或global）。with语句也会创建一个对象环境记录。

2. 外部词法环境引用（Outer Lexical Environment Reference）：

   • 这是一个指向父级词法环境的引用。
   • 这个outer引用就是构建作用域链的关键！它决定了当在当前词法环境中找不到某个变量时，引擎应该去哪里继续查找。

我们可以用一个表格来概括词法环境的结构：

组成部分	描述
环境记录 (Environment Record)	存储当前作用域中声明的变量和函数的实际绑定。
声明式环境记录	存储 var, let, const 变量、函数声明和函数参数。
对象环境记录	存储绑定到特定对象的属性（如全局对象属性），或 with 语句创建的临时作用域。
外部词法环境引用 (Outer Lexical Environment Reference)	指向当前词法环境的父级词法环境。这是作用域链的链接。

1.2 执行上下文的生命周期与词法环境的创建

当JavaScript引擎准备执行一段代码时（例如，调用一个函数），它会经历以下几个阶段来创建和管理执行上下文：

1. 创建阶段（Creation Phase）：

   • 创建词法环境（LexicalEnvironment）：
     • 创建一个新的词法环境组件。
     • 初始化其环境记录：扫描当前代码，将var变量、函数声明、let/const变量（此时放入TDZ）和函数参数（如果适用）添加到环境记录中。
     • 设置其outer引用：这至关重要，它指向定义该函数（或代码块）的那个词法环境。这就是词法作用域的体现。
   • 创建变量环境（VariableEnvironment）：
     • 在ES6之前，变量环境与词法环境是分开的，它专门用于存储var变量和函数声明。在ES6及以后，VariableEnvironment的行为与LexicalEnvironment非常相似，甚至很多情况下指向同一个对象，主要区别在于let/const变量只存在于LexicalEnvironment中，而不会被提升到VariableEnvironment。为了简化理解，我们可以认为VariableEnvironment是LexicalEnvironment的一个子集，主要处理var的提升。
   • 设置this绑定（ThisBinding）：确定this关键字的值。

2. 执行阶段（Execution Phase）：

   • 引擎开始执行代码。
   • 在代码执行过程中，如果遇到变量或函数引用，就会触发作用域链查找机制。
   • 对变量进行赋值，更新环境记录中的值。

理解了这些基础，我们现在可以正式进入作用域链的构建与查找了。

2. 作用域链的构建：outer引用的串联

作用域链本质上是由一系列嵌套的词法环境通过它们的outer引用连接起来的。这个链条的形成，完全遵循词法作用域的规则：函数在何处被定义，其outer引用就指向何处的词法环境。

让我们通过代码示例来具体理解。

2.1 全局作用域

// 全局执行上下文的词法环境 (Global Lexical Environment)
//   - 环境记录: {
//       message: undefined (初始化)
//       sayHello: <func>
//     }
//   - outer: null (全局环境没有父级)

let message = "Hello from global scope!"; // 声明在全局环境

function sayHello() { // 声明在全局环境
    // 函数 sayHello 的词法环境创建
    //   - 环境记录: {}
    //   - outer: Global Lexical Environment (因为sayHello在全局被定义)

    console.log(message); // 查找 message
}

sayHello(); // 调用 sayHello，创建函数EC

在这个例子中：

• 当全局代码开始执行时，会创建一个全局词法环境。
• message和sayHello函数被声明在这个全局词法环境的环境记录中。
• 全局词法环境的outer引用是null，因为它没有父级。
• 当sayHello函数被定义时，它的内部[[Environment]]（一个内部属性，用于存储其定义时的词法环境）会被设置为当前的全局词法环境。这意味着，无论sayHello在哪里被调用，它始终“记住”它的父级是全局环境。

2.2 嵌套函数与作用域链

// 1. 全局词法环境 (Global Lexical Environment)
//    - 环境记录: { globalVar: undefined, outerFunc: <func> }
//    - outer: null

let globalVar = "I am global";

function outerFunc() { // 定义在全局环境
    // 2. outerFunc 的词法环境 (OuterFunc Lexical Environment)
    //    - 环境记录: { outerVar: undefined, innerFunc: <func> }
    //    - outer: Global Lexical Environment (因为outerFunc定义在全局)

    let outerVar = "I am from outerFunc";

    function innerFunc() { // 定义在 outerFunc 内部
        // 3. innerFunc 的词法环境 (InnerFunc Lexical Environment)
        //    - 环境记录: { innerVar: undefined }
        //    - outer: OuterFunc Lexical Environment (因为innerFunc定义在outerFunc内部)

        let innerVar = "I am from innerFunc";
        console.log(innerVar);  // 查找 innerVar
        console.log(outerVar);  // 查找 outerVar
        console.log(globalVar); // 查找 globalVar
        // console.log(nonExistentVar); // 如果找不到，会抛出 ReferenceError
    }

    innerFunc(); // 调用 innerFunc
}

outerFunc(); // 调用 outerFunc

让我们详细追踪这个例子中的作用域链构建：

1. 全局词法环境：

   • Environment Record: { globalVar: "I am global", outerFunc: <func> }
   • outer: null

2. outerFunc被定义时：

   • 它的内部[[Environment]]属性被设置为当前的全局词法环境。

3. 调用outerFunc()时：

   • 创建一个新的outerFunc的函数词法环境。
   • Environment Record: { outerVar: "I am from outerFunc", innerFunc: <func> }
   • outer: 指向全局词法环境 (因为outerFunc是在全局被定义的)。

4. innerFunc被定义时：

   • 它的内部[[Environment]]属性被设置为当前的outerFunc的词法环境。

5. 调用innerFunc()时：

   • 创建一个新的innerFunc的函数词法环境。
   • Environment Record: { innerVar: "I am from innerFunc" }
   • outer: 指向outerFunc的词法环境 (因为innerFunc是在outerFunc内部被定义的)。

至此，一个完整的作用域链就形成了：
innerFunc的词法环境 -> outerFunc的词法环境 -> 全局词法环境 -> null

这个链条就是JavaScript引擎进行变量查找的路径。

2.3 闭包与作用域链的持久化

闭包是作用域链最强大的应用之一。当一个内部函数被返回并在其定义环境之外执行时，它仍然能够访问其定义时的外部词法环境中的变量。这是因为内部函数通过其[[Environment]]属性，维持了对其外部词法环境的引用，即使外部函数已经执行完毕，其词法环境也不会被垃圾回收。

function createCounter() {
    // 1. createCounter 的词法环境 (CounterFunc Lexical Environment)
    //    - 环境记录: { count: 0, increment: <func> }
    //    - outer: Global Lexical Environment

    let count = 0; // 定义在 createCounter 的词法环境

    return function increment() { // 定义在 createCounter 内部
        // 2. increment 的词法环境 (IncrementFunc Lexical Environment)
        //    - 环境记录: {} (因为没有自己的变量)
        //    - outer: CounterFunc Lexical Environment (因为increment定义在createCounter内部)

        count++; // 查找 count
        console.log(count);
    };
}

const counter1 = createCounter(); // 调用 createCounter，返回 increment 函数
// 此时，createCounter 的执行上下文已经弹出栈，
// 但其词法环境因为被 increment 函数引用着，所以不会被销毁。

counter1(); // 1. 调用 increment，查找 count。此时 count 还在！
counter1(); // 2. 再次调用 increment，count 继续增加。
counter1(); // 3.

const counter2 = createCounter(); // 再次调用 createCounter，创建新的词法环境和新的 count
counter2(); // 1

在这个例子中：

• createCounter函数执行时，创建了自己的词法环境，其中包含count变量。
• increment函数在createCounter内部定义，所以它的[[Environment]]引用指向createCounter的词法环境。
• 当createCounter执行完毕并将increment函数返回后，createCounter的执行上下文虽然从执行栈中移除了，但由于increment函数（现在被赋值给了counter1）仍然通过其[[Environment]]属性引用着createCounter的词法环境，所以这个词法环境不会被垃圾回收。
• 每次调用counter1()，都会创建一个新的increment函数执行上下文，其词法环境的outer引用依然指向那个被保留下来的createCounter的词法环境，从而能够访问并修改count。
• counter2创建了另一个独立的createCounter词法环境实例，拥有自己的count变量。

这完美展示了作用域链如何通过outer引用，在闭包中实现变量的持久化和隔离。

3. 变量查找机制：作用域链的递归遍历

现在我们已经理解了作用域链是如何构建的，那么JavaScript引擎是如何利用这个链条来查找变量的呢？

当JavaScript引擎在执行阶段遇到一个标识符（变量名、函数名）时，它会启动一个递归查找过程。这个过程从当前正在执行的词法环境开始，并沿着outer引用向上遍历，直到找到对应的标识符或者到达链的末端。

查找机制的步骤如下：

1. 从当前执行上下文的词法环境开始：

   • JavaScript引擎首先检查当前正在执行的代码所在的词法环境（例如，如果是在innerFunc内部，就是innerFunc的词法环境）的环境记录中是否存在该标识符。

2. 如果找到标识符：

   • 查找成功，返回对应的变量值或函数定义。查找过程结束。

3. 如果未找到标识符：

   • 引擎会沿着当前词法环境的outer引用，跳转到其父级词法环境。
   • 重复步骤1和步骤2：检查父级词法环境的环境记录中是否存在该标识符。

4. 重复此过程：

   • 这个过程会一直向上遍历作用域链，直到：
     • 找到该标识符。
     • 或者，遍历到作用域链的末端——全局词法环境。
     • 如果即使在全局词法环境中也未能找到该标识符（且全局环境的outer是null），那么查找失败，JavaScript引擎会抛出一个ReferenceError。

这个过程是递归的，因为它在本质上是一个深度优先搜索：在当前层找不到就去父层，父层找不到就去祖父层，以此类推。

3.1 变量查找的详细路径示例

我们再次使用之前的嵌套函数示例，并详细追踪console.log(globalVar);的查找过程。

let globalVar = "I am global";

function outerFunc() {
    let outerVar = "I am from outerFunc";

    function innerFunc() {
        let innerVar = "I am from innerFunc";
        console.log(innerVar);
        console.log(outerVar);
        console.log(globalVar); // <-- 追踪这里
    }
    innerFunc();
}
outerFunc();

当执行到console.log(globalVar);这一行时：

1. 当前词法环境：innerFunc的词法环境。

   • 检查其环境记录：{ innerVar: "I am from innerFunc" }。
   • globalVar不在其中。

2. 向上查找：innerFunc词法环境的outer引用指向outerFunc的词法环境。

   • 检查outerFunc词法环境的环境记录：{ outerVar: "I am from outerFunc", innerFunc: <func> }。
   • globalVar仍不在其中。

3. 继续向上查找：outerFunc词法环境的outer引用指向全局词法环境。

   • 检查全局词法环境的环境记录：{ globalVar: "I am global", outerFunc: <func> }。
   • 找到 globalVar！ 返回其值 "I am global"。

查找过程结束，console.log打印出 "I am global"。

3.2 变量遮蔽（Shadowing）

作用域链查找机制也解释了变量遮蔽（或称变量掩盖）的行为。当在内部作用域中声明一个与外部作用域同名的变量时，内部变量会“遮蔽”外部变量。这是因为查找总是从当前作用域开始，一旦找到，就不会再向上查找。

let x = 10; // 全局作用域

function outer() {
    let x = 20; // outerFunc 作用域遮蔽全局 x

    function inner() {
        let x = 30; // innerFunc 作用域遮蔽 outerFunc 的 x
        console.log(x); // 查找 x
    }
    inner();
    console.log(x); // 查找 x
}
outer();
console.log(x); // 查找 x

追踪查找过程：

1. inner()内部的 console.log(x)：

   • 从inner的词法环境开始，找到x: 30。停止查找。输出 30。

2. outer()内部的 console.log(x)：

   • inner()执行完毕后，控制流回到outer()。
   • 从outer的词法环境开始，找到x: 20。停止查找。输出 20。

3. 全局的 console.log(x)：

   • outer()执行完毕后，控制流回到全局。
   • 从全局词法环境开始，找到x: 10。停止查找。输出 10。

这清晰地展示了作用域链查找的“近优先”原则。

3.3 var、let、const与作用域链

var、let和const在作用域链中的行为略有不同，主要体现在它们如何被添加到词法环境的环境记录中，以及它们的作用域类型。

• var：

  • 具有函数作用域或全局作用域。
  • 在创建阶段会被提升（hoisting）到其最近的函数词法环境或全局词法环境的VariableEnvironment（或声明式环境记录中var的部分）。
  • 初始化为undefined。

• let 和 const：

  • 具有块级作用域。
  • 在创建阶段被提升到它们所在块的词法环境的声明式环境记录中，但不会初始化。
  • 在声明之前访问它们会导致暂时性死区（Temporal Dead Zone, TDZ），抛出ReferenceError。
  • 它们为每次遇到{}代码块都创建了一个新的词法环境实例。

// 全局词法环境
//   - 环境记录: { globalVarLet: <uninitialized>, globalVarVar: undefined }
//   - outer: null

let globalVarLet = "global let";
var globalVarVar = "global var";

function myFunction() {
    // myFunction 词法环境
    //   - 环境记录: { myVarLet: <uninitialized>, myVarVar: undefined }
    //   - outer: 全局词法环境

    console.log(globalVarVar); // 查找 globalVarVar: (myFunction LE -> Global LE) -> "global var"
    // console.log(myVarLet);   // ReferenceError: 处于 TDZ
    // console.log(myVarVar);   // undefined: var 被提升

    let myVarLet = "function let";
    var myVarVar = "function var";

    { // 块级作用域
        // 块级词法环境 (新的词法环境实例)
        //   - 环境记录: { blockVarLet: <uninitialized> }
        //   - outer: myFunction 词法环境 (因为块在myFunction内部)

        // console.log(blockVarLet); // ReferenceError: 处于 TDZ

        let blockVarLet = "block let";
        console.log(blockVarLet); // 查找 blockVarLet: (Block LE) -> "block let"
        console.log(myVarLet);    // 查找 myVarLet: (Block LE -> myFunction LE) -> "function let"
        console.log(globalVarLet); // 查找 globalVarLet: (Block LE -> myFunction LE -> Global LE) -> "global let"
    }

    console.log(myVarLet); // 查找 myVarLet: (myFunction LE) -> "function let"
}

myFunction();

在这个例子中，let和const在各自的块级词法环境（包括函数体）中创建新的绑定，并且它们的TDZ机制也依赖于词法环境的创建和初始化阶段。每当进入一个新的块级作用域，就会创建一个新的词法环境，并将其outer引用指向包含它的那个词法环境。

4. 特殊情况与高级概念

4.1 with 语句 (已废弃，但解释原理)

with语句允许你将一个对象的属性添加到作用域链的头部。它会创建一个对象环境记录并将其插入到当前词法环境和其outer引用之间。

const user = {
    name: "Alice",
    age: 30
};

function greet() {
    let city = "New York";
    with (user) {
        // with 语句创建了一个新的词法环境 (Object Environment Record)
        //   - 环境记录: user 对象的属性 (name, age)
        //   - outer: greet 的词法环境

        console.log(name); // 直接查找 name，会先在 with 创建的 LE 中找到 user.name
        console.log(age);   // 直接查找 age，会先在 with 创建的 LE 中找到 user.age
        console.log(city);  // 如果 name/age 找不到，会向上查找，在 greet 的 LE 中找到 city
    }
    console.log(city);
}

greet();

with语句的工作原理：

1. 当执行到with (object)时，会创建一个新的词法环境。
2. 这个新词法环境的Environment Record是一个对象环境记录，它将object的属性作为标识符。
3. 这个新词法环境的outer引用指向with语句所在函数的词法环境。
4. 因此，在with块内部，变量查找会首先检查object的属性，然后再向上遍历到正常的词法环境链。

为什么不推荐使用with？

• 性能问题：动态地修改作用域链会阻止JS引擎进行某些优化。
• 可读性差：代码变得难以理解，因为不清楚一个变量是来自with对象还是外部作用域。
• 严格模式禁用：在严格模式下，with语句是被禁止的。

4.2 eval() 函数

eval()函数能够执行字符串形式的JavaScript代码，并且它可以影响或创建新的作用域。

• 直接调用 eval (eval("code"))：
  • 在非严格模式下，eval会在调用它的那个词法环境中创建新的变量和函数。这意味着它会修改调用者的词法环境。
  • 在严格模式下，eval会创建自己的词法环境，不会污染调用者的词法环境。
• 间接调用 eval ((0, eval)("code") 或 window.eval("code"))：
  • 总是会在全局作用域中执行代码，无论在哪里被调用。

let evalVar = "global eval var";

function evalScope() {
    let funcVar = "function scope var";

    // 1. 直接 eval (非严格模式)
    eval("var newEvalVar = 'new var from eval'; console.log(funcVar);");
    console.log(newEvalVar); // 可以在 evalScope 内部访问 newEvalVar

    // 2. 间接 eval
    (0, eval)("var indirectEvalVar = 'indirect var'; console.log(globalVarVar);");
    // console.log(indirectEvalVar); // ReferenceError: indirectEvalVar 是在全局作用域创建的
}

evalScope();
console.log(newEvalVar); // ReferenceError: newEvalVar 在 evalScope 的词法环境，无法在全局访问
console.log(indirectEvalVar); // 可以在全局访问

eval的复杂性在于它可以在运行时修改词法环境，这同样会阻碍JS引擎的优化，并导致代码难以预测和调试。因此，它也应该尽可能避免使用。

4.3 模块（ES Modules）

ES模块（import/export）引入了新的模块作用域。每个模块都有自己独立的顶层词法环境，它不是全局环境的子级。这意味着在一个模块中声明的变量不会自动成为全局变量。

// module.js
// 模块词法环境 (Module Lexical Environment)
//   - 环境记录: { moduleName: "MyModule", exportedValue: <value> }
//   - outer: null (通常，模块的outer是null或一个特殊的代理环境)

export const exportedValue = 42;
const moduleName = "MyModule";

// console.log(window.moduleName); // undefined, moduleName 不是全局的

当一个模块被导入时，它会执行在一个独立的模块词法环境中。模块内部的变量和函数都绑定在这个环境中。这种设计提供了更好的封装性和隔离性，是现代JavaScript开发的基础。

5. 作用域链与性能考量

理论上，作用域链越长，变量查找的开销就越大，因为引擎需要遍历更多的词法环境。然而，在现代JavaScript引擎（如V8）中，这种性能差异通常是微不足道的，除非在极端深度嵌套或非常频繁访问的情况下。

5.1 优化建议 (通常是微优化)

1. 减少不必要的嵌套：如果函数没有实际需要访问外部作用域的变量，可以考虑将其移到更顶层的作用域，减少作用域链的长度。

2. 缓存外部变量：对于在深层嵌套函数中频繁访问的外部变量，可以将其缓存到局部变量中，减少重复的作用域链查找。

   function heavyComputation() {
       let largeArray = Array(100000).fill(0); // 外部变量
   
       function processItem() {
           // 每次调用 processItem 都会查找 largeArray
           // largeArray.forEach(item => { /* ... */ });
       }
   
       // 优化：将 largeArray 缓存到局部变量
       const cachedLargeArray = largeArray;
       function optimizedProcessItem() {
           // 直接访问局部变量，避免作用域链查找
           cachedLargeArray.forEach(item => { /* ... */ });
       }
   
       return optimizedProcessItem;
   }
   
   const worker = heavyComputation();
   worker();

   注意：这种优化往往是微优化。现代JS引擎的优化器非常智能，很多情况下会自动处理这类问题。过度进行微优化可能会降低代码可读性，得不偿失。只有在经过性能分析（profiling）确认作用域链查找确实是瓶颈时才考虑。

3. 避免with和eval：这两个语句会动态修改作用域链，使得JS引擎无法在编译阶段进行有效的优化，导致运行时性能下降和预测性降低。

5.2 垃圾回收与作用域链

作用域链也与垃圾回收机制紧密相关。如果一个词法环境中的变量被其内部函数（通过闭包）引用，那么即使外部函数执行完毕，这个词法环境也不会被垃圾回收，直到所有对它的引用都消失。这是闭包内存泄漏的常见原因，如果不小心处理，可能会导致内存占用过高。

let elements = [];

function createLeak() {
    let largeData = new Array(1000000).fill("some string"); // 大数据

    elements.push(function() {
        // 闭包引用了 largeData，导致 createLeak 的词法环境不会被回收
        console.log(largeData.length);
    });
}

createLeak(); // 调用后，largeData 应该被回收，但它没有
// elements 数组中现在有一个函数，这个函数保持了对 largeData 的引用。

// 如果要释放内存：
// elements = []; // 解除所有引用，largeData 最终会被垃圾回收

理解作用域链如何保持引用，对于编写健壮、无内存泄漏的JavaScript代码至关重要。

6. 作用域链的实践与理解

作用域链是JavaScript语言行为的基石。无论你是在编写简单的脚本，还是复杂的单页应用，作用域链都在幕后默默工作，决定着变量的可见性和生命周期。

• 理解闭包：闭包是作用域链最直接的体现。当你看到一个函数能够访问它定义时的外部变量时，你就知道作用域链在发挥作用。
• 调试变量：当你在调试器中查看变量时，调试器通常会显示当前执行上下文的作用域链，帮助你理解变量的来源。
• 避免意外的全局变量：在函数内部不使用var, let, const声明变量，直接赋值，会导致变量被添加到作用域链的顶端（全局对象），这通常不是期望的行为。理解作用域链查找机制可以帮助你避免这类错误。
• 模块化开发：ES模块通过为每个模块提供独立的词法环境，有效地利用了作用域链的隔离特性，避免了全局命名冲突。

结语

作用域链是JavaScript变量查找的根本机制，它由一系列嵌套的词法环境通过outer引用串联而成。理解其构建和递归查找过程，是掌握JavaScript词法作用域、闭包以及变量生命周期的关键。通过深入剖析执行上下文、词法环境及其组成部分，我们能够清晰地看到JavaScript引擎如何精准且高效地解析每一个标识符，从而编写出更可预测、更健壮的代码。