Quartz 4

词法环境-outer

6 min read

JavaScript 中的 outer：词法环境的外部引用

在 JavaScript 中，outer 是词法环境（Lexical Environment）的一个重要组成部分，它指向当前词法环境的外部引用（outer reference），用于实现作用域链的向上查找机制。通过 outer，JavaScript 引擎可以在嵌套的作用域中查找变量和函数。

1. 词法环境（Lexical Environment）

词法环境是 JavaScript 引擎用来管理变量和函数的作用域的内部数据结构。每个词法环境由两部分组成：

  1. 环境记录（Environment Record）：存储当前作用域中定义的变量和函数。
  2. 外部引用（outer）：指向外部的词法环境，形成一个链式结构（作用域链）。

2. outer 的作用

outer 是词法环境的一个属性，它指向外部的词法环境。当 JavaScript 引擎在当前词法环境中找不到某个变量时，会通过 outer 引用链式地向上查找，直到找到该变量或到达全局作用域（全局词法环境）。

作用域链的查找过程

  1. 在当前词法环境的环境记录中查找变量。
  2. 如果找不到，通过 outer 引用查找外部词法环境。
  3. 重复上述过程，直到找到变量或到达全局词法环境。
  4. 如果全局词法环境中也没有找到，则抛出 ReferenceError。

3. 示例：outer 的链式查找

let globalVar = "I'm global";
 
function outer() {
    let outerVar = "I'm outer";
    
    function inner() {
        let innerVar = "I'm inner";
        console.log(innerVar);  // "I'm inner"（当前作用域）
        console.log(outerVar); // "I'm outer"（通过 outer 引用查找）
        console.log(globalVar); // "I'm global"（通过 outer 引用查找）
    }
    
    inner();
}
 
outer();

词法环境的结构

  1. 全局词法环境：

    • 环境记录：{ globalVar: "I'm global" }
    • outer: null（全局环境没有外部引用）

  2. outer 函数的词法环境：

    • 环境记录：{ outerVar: "I'm outer" }
    • outer: 指向全局词法环境

  3. inner 函数的词法环境：

    • 环境记录：{ innerVar: "I'm inner" }
    • outer: 指向 outer 函数的词法环境

查找过程

  • 当 inner 函数访问 outerVar 时：
    1. 先在 inner 的环境记录中查找，未找到。
    2. 通过 outer 引用，查找 outer 函数的词法环境，找到 outerVar。
  • 当 inner 函数访问 globalVar 时：
    1. 先在 inner 的环境记录中查找，未找到。
    2. 通过 outer 引用，查找 outer 函数的词法环境，未找到。
    3. 继续通过 outer 引用，查找全局词法环境，找到 globalVar。

4. outer 与闭包

闭包（Closure）是 JavaScript 中一个重要的概念，它的实现依赖于 outer 引用。当一个函数访问了外部作用域的变量时，即使外部函数已经执行完毕，闭包仍然会保留对外部词法环境的引用。

示例：闭包中的 outer

function outer() {
    let outerVar = "I'm outer";
    
    function inner() {
        console.log(outerVar); // 访问外部变量
    }
    
    return inner;
}
 
const closureFunc = outer();
closureFunc(); // "I'm outer"

解释

  • inner 函数形成了闭包，保留了对外部词法环境（outer 函数的词法环境）的引用。
  • 即使 outer 函数已经执行完毕，inner 仍然可以通过 outer 引用访问 outerVar。

5. outer 与作用域链

作用域链是由词法环境的 outer 引用形成的链式结构。通过作用域链，JavaScript 实现了词法作用域（静态作用域）的机制。

作用域链的特点

  1. 静态性：作用域链在代码编写时就已经确定，不会在运行时改变。
  2. 嵌套性：内部作用域可以访问外部作用域的变量，但外部作用域不能访问内部作用域的变量。
  3. 链式查找：通过 outer 引用，逐级向上查找变量。

6. 总结

  • outer 是词法环境的外部引用，用于实现作用域链的向上查找机制。
  • 通过 outer，JavaScript 引擎可以在嵌套的作用域中查找变量和函数。
  • outer 是实现闭包和作用域链的核心机制。
  • 理解 outer 的作用有助于深入掌握 JavaScript 的作用域、闭包和变量查找机制。

7. 图示：词法环境与 outer 引用

全局词法环境
- 环境记录: { globalVar: "I'm global" }
- outer: null

outer 函数的词法环境
- 环境记录: { outerVar: "I'm outer" }
- outer: 指向全局词法环境

inner 函数的词法环境
- 环境记录: { innerVar: "I'm inner" }
- outer: 指向 outer 函数的词法环境

通过 outer 引用，JavaScript 引擎可以沿着作用域链查找变量，从而实现词法作用域的功能。

Graph View

Backlinks