引言：作用域链的必要性与核心问题

JavaScript 的函数嵌套特性要求引擎具备跨层级变量访问能力。当内部函数访问外部变量时，作用域链（Scope Chain） 成为实现这一能力的核心机制。考虑以下典型场景：

const globalVar = 'Global'; function outer() { const outerVar = 'Outer'; function inner() { console.log(outerVar); // 成功访问外部变量 console.log(globalVar); // 访问全局变量 } inner(); } outer();

此例中，inner() 能访问定义位置之外的变量，其背后正是作用域链在运作。JavaScript 采用词法作用域（Lexical Scoping），作用域在函数定义时确定，而非调用时动态决定。

---

一、作用域基础：变量的可访问边界

1.1 作用域类型及特性

作用域类型	声明方式	作用域边界	特性说明
全局作用域	最外层声明	整个程序	易引发命名冲突，慎用
函数作用域	var/function	函数体 {}	存在变量提升
块级作用域 (ES6)	let/const	任意 {} 块	解决循环泄露问题，支持TDZ

变量提升示例：

function func() { console.log(a); // undefined (非ReferenceError) var a = 10; }

1.2 作用域层级关系

全局作用域

outer函数作用域

inner函数作用域

if块级作用域

核心规则：内部作用域可访问外部变量，外部作用域无法访问内部变量（单向访问）。

---

二、作用域链的构建机制

2.1 核心概念定义

• 变量对象（VO）：全局执行上下文关联的存储对象
• 活动对象（AO）：函数执行时创建的局部作用域对象
• 词法环境（Lexical Environment）：ES6引入的包含环境记录和外部引用的结构

2.2 作用域链形成过程

函数定义阶段：

function outer() { const outerVar = 'O'; function inner() { /* 此时捕获[[Environment]] */ } }

1. 函数创建时生成内部属性 [[Environment]]
2. [[Environment]] 保存父级作用域链（词法环境）

函数调用阶段：

1. 创建函数执行上下文
2. 生成活动对象（存储参数、局部变量）
3. 构建作用域链：[当前AO] -> [[Environment]]引用链

2.3 作用域链结构示例

const globalVar = 'G'; function outer() { const outerVar = 'O'; function inner() { console.log(outerVar, globalVar); } inner(); // 调用时作用域链：inner.AO → outer.AO → Global.VO } outer();

---

三、作用域链的工作机制

3.1 变量查找四步流程

1. 当前作用域查找：检查当前AO/词法环境
2. 链式回溯：通过outer引用向父级作用域查找
3. 抵达全局：遍历至全局VO
4. 处理结果：
   • 找到：返回对应值
   • 未找到：
     • 严格模式：抛出 ReferenceError
     • 非严格模式：创建全局变量

3.2 关键特性解析

遮蔽现象示例：

const x = 'global'; function demo() { const x = 'local'; // 遮蔽全局x console.log(x); // 'local' }

词法性验证：

const name = 'Global'; function showName() { console.log(name); } function wrapper() { const name = 'Local'; showName(); // 输出"Global" (定义时决定) } wrapper();

3.3 经典问题：循环与闭包

问题代码：

for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 输出3,3,3 }

解决方案对比：

// 方案1：IIFE创建函数作用域 for (var i = 0; i < 3; i++) { (function(j) { setTimeout(() => console.log(j), 100); })(i); } // 方案2：let创建块级作用域（推荐） for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 0,1,2 }

---

四、闭包：作用域链的终极应用

4.1 闭包形成三要素

1. 存在内部函数
2. 内部函数引用外部变量（自由变量）
3. 内部函数在外部函数执行后仍存活

4.2 内存引用原理

闭包函数

Environment

outer函数的AO

Global.VO

关键机制：闭包通过 [[Environment]] 持久持有父级AO的引用，阻止垃圾回收。

4.3 实践应用模式

模块模式：

const calculator = (() => { let memory = 0; // 私有状态 return { add: x => memory += x, get: () => memory }; })(); calculator.add(5); console.log(calculator.get()); // 5

函数工厂：

function createFormatter(prefix) { return function(text) { return `[${prefix}] ${text}`; }; } const warn = createFormatter('WARNING'); console.log(warn('Disk full')); // [WARNING] Disk full

---

五、作用域链的影响与优化

5.1 内存管理要点

场景	风险	解决方案
DOM事件绑定	元素引用无法释放	移除监听+置空引用
缓存大对象	内存占用过高	局部变量替代闭包引用
定时器/回调	意外长生命周期	显式清除定时器

5.2 性能优化策略

// 优化前：深层作用域链查找 function processData() { const data = fetchData(); // 大对象 data.items.forEach(item => { // 多次访问外部data render(item.id, data.config); }); } // 优化后：缓存变量 function processData() { const data = fetchData(); const { config } = data; // 解构到局部变量 data.items.forEach(item => { render(item.id, config); // 减少作用域层级 }); }

5.3 现代最佳实践

1. 变量声明：
   // 推荐 let count = 0; const MAX_SIZE = 100; // 避免 var total = 0;
2. 严格模式强制启用：
   'use strict'; // 模块内默认启用
3. 模块化组织：
   // lib.js export const API_URL = 'https://api.example.com'; // app.js import { API_URL } from './lib.js';

---

六、总结：作用域链的核心要义

1. 词法决定性：作用域链在函数定义时基于代码结构确定
2. 链式查找：变量解析沿 AO → 父级AO → Global.VO 路径回溯
3. 闭包本质：通过持久化[[Environment]]实现跨作用域状态保持
4. 现代实践：
   • 优先使用 let/const 块级作用域
   • 用 ES Modules 替代 IIFE
   • 严格模式作为默认选择