JavaScript 作用域与闭包详解：从词法作用域到性能优化

结果或目标：理解变量可见性与生命周期

在 JavaScript 编程中，明确变量的有效范围（即作用域）对于防止命名冲突、内存泄漏和意外覆盖至关重要。作用域不仅决定了变量何时可见，还关联着垃圾回收的生命周期。本文将拆解 JavaScript 的作用域模型，帮助你理解为何某些变量在外部无法访问，以及如何通过合理的代码结构优化运行效率。

准备条件：静态与动态作用域的区别

理解 JavaScript 作用域的第一步是区分两种主要的绑定方式。JavaScript 采用的是静态作用域（也称为词法作用域），这意味着变量的作用域在代码编写阶段（编译时）就已经确定，而不是在运行时才决定。

第1步：识别静态作用域（Lexical Scoping）

目的：了解为何内部函数能访问外部函数定义的变量，而反之则不行。
原理：标识符的查找遵循“由内向外”的词法嵌套顺序。如果在当前作用域未找到声明，则向上层父作用域查找，直到全局作用域。
示例：

function outer() {
    var name = "xiao";
    function inner() {
        console.log(name); // 能访问到 outer 中的 name
    }
    inner();
}

在上述代码中，inner 函数在执行时，会通过作用域链向上搜索 name 的定义。如果找不到，则会抛出引用错误（ReferenceError）。这就是静态作用域的核心逻辑。

第2步：对比动态作用域（Dynamic Scoping）

说明：动态作用域下的变量值取决于函数被调用的位置，而非定义位置。大多数现代语言（如 Python、C++）均采用静态作用域，这减少了代码的不确定性。

真实操作顺序：JavaScript 的三种作用域类型

第1步：全局作用域（Global Scope）

入口：window 对象或直接在全局脚本中声明。
动作：以下情况创建的变量拥有全局作用域：
1. 在最外层函数外部定义的变量。
2. 未使用 var、let 或 const 直接赋值的变量（自动成为 window 对象的属性）。
3. 所有 window 对象的固有属性。

第2步：局部作用域（Function Scope）

入口：函数内部。
动作：使用 var 或 let/const 在函数内部声明的变量仅在函数体内可见。函数执行完毕后，局部变量通常会被销毁（除非被闭包引用）。

function testScope() {
    var localVar = "I am local";
    globalVar = "I am global"; // 隐式全局变量
}
testScope();
console.log(globalVar); // "I am global"
// console.log(localVar); // ReferenceError

第3步：关于块级作用域的正确认知

误区澄清：许多有 C/Java 背景的开发者误以为 JavaScript 存在天然的块级作用域（如 if 或 for 语句块）。在 ES5 及之前，使用 var 声明的变量不具备块级作用域：

if (true) {
    var blockVar = "visible outside";
}
console.log(blockVar); // "visible outside" (在严格模式或ES6+ let前)

解决方案：若要模拟块级作用域隔离变量，需使用立即执行函数表达式（IIFE）创建新的函数作用域，这也是早期闭包应用的主要场景：

(function() {
    var blockVar = "hidden inside IIFE";
})();
// console.log(blockVar); // ReferenceError

注：在现代 JavaScript (ES6+) 中，推荐使用 let 和 const 来原生支持块级作用域，从而更安全地隔离变量。

完成判断：作用域链的运行机制

当函数被调用时，JavaScript 引擎会创建一个“执行上下文”（Execution Context），并为该上下文构建一个作用域链。作用域链是一个对象列表，决定了哪些数据可被当前代码访问。

第1步：构建活动对象（Activation Object）

动作：函数执行时，其内部的局部变量、参数集合、this 指针等会被封装成一个“活动对象”，并推入作用域链的最前端。
可观察状态：此时作用域链变为：[活动对象] → [外层函数的作用域链...] → [全局对象]。

第2步：标识符解析流程

动作：代码中每遇到一个变量名，引擎都会从作用域链头部（活动对象）开始向后搜索。
结果：找到同名标识符即停止搜索并使用；若遍历完整个链仍未找到，则视为未定义（或在严格模式下报错）。这一过程解释了为何内部函数可以访问外部变量。

原文有依据的排错与代码优化

第1步：识别全局变量查找的性能瓶颈

问题：由于全局对象始终位于作用域链的最末端，查找全局变量需要遍历更长的路径，速度相对较慢。频繁访问全局变量会影响性能。

第2步：实施局部变量缓存优化

操作：将多次引用的全局对象存储在局部变量中，利用局部变量在作用链前端的优势提升读取速度。

优化前（低效）：

function changeColor() {
    document.getElementById("btnChange").onclick = function() {
        document.getElementById("targetCanvas").style.backgroundColor = "red";
    };
}

优化后（高效）：

function changeColor() {
    var doc = document; // 缓存为局部变量
    doc.getElementById("btnChange").onclick = function() {
        doc.getElementById("targetCanvas").style.backgroundColor = "red";
    };
}

注意：虽然单次差异微小，但在复杂应用或循环中，减少跨作用域查找次数能显著改善整体响应速度。

第3步：避免使用 with 语句破坏作用域链

风险：with 语句会将指定对象推入作用域链的头部。这导致原本在前端的局部变量被迫后移，增加了后续所有局部变量的访问延迟。同时，with 会动态改变作用域，使得编译器难以进行静态代码优化。

建议：直接使用局部变量替代，例如 var bd = document.body;，既安全又高效。

简要总结

JavaScript 采用词法作用域，变量的可见性由代码书写的位置决定，而非调用位置。核心要点包括：优先使用局部变量以减少查找开销；利用 ES6+ 的 let/const 管理块级作用域；避免滥用全局变量和 with 语句以保证性能和安全。通过理解作用域链的构建与解析过程，你可以写出更清晰、高效的代码。