JavaScript作用域链：从Lexical Environment到闭包

<think>我们正在讨论JavaScript的作用域链。根据用户的问题，他们希望理解作用域链的工作原理。结合提供的引用，我们可以详细解释作用域链的概念、创建过程、查找规则以及相关示例。 首先，作用域链是JavaScript中用于确定变量和函数可访问性的机制。它由一系列变量对象组成，这些变量对象按照它们被创建的顺序（即执行环境的嵌套顺序）排列。 ### 作用域链的组成 1. **变量对象（Variable Object）**：每个执行环境都有一个与之关联的变量对象，用于存储该环境中定义的变量和函数。在全局执行环境中，变量对象就是全局对象（在浏览器中是`window`）。在函数执行环境中，变量对象被称为活动对象（Activation Object），它包含了函数的参数、局部变量和内部函数声明。 2. **作用域链的构建**：当创建一个执行环境（如函数被调用）时，会创建相应的作用域链。作用域链的前端始终是当前执行环境的变量对象。下一个变量对象来自包含（外部）环境，再下一个来自更外层的环境，直到全局执行环境。这样，作用域链形成了一个由变量对象组成的链式结构。 ### 作用域链的创建过程 - 在函数定义时，函数内部属性`[[Scope]]`会保存其所在环境的作用域链（即函数定义时的作用域链）。 - 当函数被调用时，会创建该函数的执行环境，然后创建其作用域链：首先复制函数`[[Scope]]`属性中的作用域链，然后将当前执行环境的活动对象添加到作用域链的前端。 - 这样，函数在执行时就可以通过这个作用域链访问到所有外层环境的变量和函数。 ### 标识符解析 当代码在一个环境中执行时，每遇到一个变量（标识符），就会沿着作用域链进行搜索。搜索从作用域链的前端（当前执行环境的变量对象）开始，如果找到该标识符则停止搜索；如果没有找到，则继续沿着作用域链向后（外层）搜索，直到全局执行环境的变量对象。如果全局环境中也没有找到，则会抛出引用错误（ReferenceError）。 ### 示例分析 考虑以下代码： ```javascript var globalVar = 'global'; function outer() { var outerVar = 'outer'; function inner() { var innerVar = 'inner'; console.log(innerVar); // 访问当前作用域的变量 console.log(outerVar); // 访问外层作用域的变量 console.log(globalVar); // 访问全局作用域的变量 } inner(); } outer(); ``` 1. **全局执行环境**：作用域链只包含全局变量对象（`window`），其中有`globalVar`和`outer`函数。 2. **调用`outer`函数**：创建`outer`的执行环境，其作用域链前端是`outer`的活动对象（包含`outerVar`和`inner`函数），然后指向全局变量对象。 3. **调用`inner`函数**：创建`inner`的执行环境，其作用域链前端是`inner`的活动对象（包含`innerVar`），然后指向`outer`的活动对象，最后指向全局变量对象。 当在`inner`函数中访问变量时： - `innerVar`：在`inner`的活动对象中找到。 - `outerVar`：在`inner`的活动对象中未找到，继续到下一个对象（`outer`的活动对象）中找到。 - `globalVar`：在`inner`和`outer`的活动对象中都未找到，最后在全局变量对象中找到。 ### 闭包与作用域链 闭包是函数和其被创建时的作用域链的组合。即使外部函数已经执行完毕，只要内部函数（闭包）还在被引用，外部函数的活动对象就不会被销毁，因为内部函数的作用域链仍然保持着对外部函数活动对象的引用。 例如： ```javascript function createCounter() { let count = 0; return function() { count++; console.log(count); }; } const counter = createCounter(); counter(); // 1 counter(); // 2 ``` 这里，返回的内部函数形成了一个闭包，它保存着`createCounter`函数的作用域链，因此可以访问和修改`count`变量。 ### 总结 作用域链是JavaScript中实现词法作用域的基础，它保证了变量和函数的有序访问。理解作用域链对于理解闭包、变量提升以及执行环境等概念至关重要。 §§相关问题§§ 1. 作用域链和闭包之间有什么关系？ 2. 如何利用作用域链解释JavaScript中的变量提升？ 3. 在ES6中，`let`和`const`的块级作用域是如何影响作用域链的？ 4. 在异步编程中，作用域链是如何影响回调函数的变量访问的？</think>### JavaScript作用域链详解 作用域链是JavaScript中实现词法作用域的核心机制，它决定了变量和函数的可访问范围。以下是工作原理的逐步解析： #### 1. **核心概念** - **执行环境（Execution Context）**：代码执行时创建的环境，包含变量对象和作用域链 - **变量对象（Variable Object）**：存储当前环境定义的变量、函数和参数 - **作用域链（Scope Chain）**：由变量对象组成的链式结构，实现变量查找的层级关系 - **全局对象**：最外层的变量对象（浏览器中为`window`） #### 2. **作用域链的创建过程** 1. **函数定义时**：函数内部属性`[[Scope]]`保存**父级作用域链** ```javascript function outer() { // [[Scope]] = [globalVO] function inner() { // [[Scope]] = [outerVO, globalVO] } } ``` 2. **函数调用时**： - 创建执行环境 → 复制`[[Scope]]`作为基础 - 创建当前活动对象 → 添加到作用域链前端 - 形成最终作用域链：`[当前AO, ...父级作用域链]` #### 3. **变量查找规则（标识符解析）** - 从作用域链最前端（当前活动对象）向末端（全局对象）逐级查找 - 找到即停止，未找到报`ReferenceError` - 示例： ```javascript var globalVar = 1; function outer() { var outerVar = 2; function inner() { var innerVar = 3; console.log(innerVar); // 3（当前AO） console.log(outerVar); // 2（父级AO） console.log(globalVar); // 1（全局VO） } inner(); } ``` #### 4. **执行栈与作用域链** JavaScript使用**执行栈（Call Stack）**管理执行环境： ```javascript function first() { console.log(1); second(); // 压栈 } function second() { console.log(2); } first(); // 压栈 → 执行 → 出栈 ``` 执行顺序： 1. 全局环境入栈 2. `first()`入栈 → 创建作用域链`[firstAO, globalVO]` 3. `second()`入栈 → 作用域链`[secondAO, firstAO, globalVO]` 4. 函数执行后从栈顶弹出 #### 5. **闭包与作用域链** 闭包的本质是**保留外部函数的作用域链**： ```javascript function createCounter() { let count = 0; // 被闭包保留 return function() { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 ``` 闭包函数的作用域链：`[闭包AO, createCounterAO, globalVO]`，即使`createCounter`已执行完毕，其AO仍被保留[^3]。 #### 6. **ES6的块级作用域** `let/const`引入块级作用域，通过**词法环境（Lexical Environment）**实现： ```javascript { let blockVar = 10; var oldVar = 20; } console.log(oldVar); // 20 console.log(blockVar); // ReferenceError ``` 块级作用域会创建新的词法环境，但不会影响函数作用域链的基本结构[^2]。 ### 总结 | 特性 | 说明 | |---------------------|-----------------------------| | 作用域链方向 | 当前AO → 父级AO → ... → 全局VO | | 变量查找 | 链式向上查找 | | 闭包本质 | 保留外部函数的作用域链 | | 执行环境生命周期 | 创建 → 执行 → 出栈 |