JavaScript嵌套函数怎么形成闭包并访问外部变量

一、嵌套函数与词法作用域：闭包产生的结构基石

所谓嵌套函数，即在函数体内部声明的另一个函数。JavaScript 采用的是词法作用域（Lexical Scoping，也称静态作用域）。这意味着函数在定义时就决定了其所能访问的作用域边界，而不是在函数被实际调用时才临时确定。

当外层函数执行并解析内部函数时，JavaScript 引擎会为内部函数对象附加一个隐藏的内部属性（在规范中通常表示为 [[Environment]] 或 [[Scopes]]）。该属性牢牢保存着当前外层函数所在词法环境的引用。即便内部函数被作为返回值传递到外部其他地方调用，这个引用也不会断开。

function createCounter(initialValue) {
  // 外部函数的局部变量
  let count = initialValue;

  // 内部嵌套函数
  function counter() {
    count += 1; // 内部函数访问外部变量 count
    return count;
  }

  return counter; // 将嵌套函数返回到外部使用
}

const myCounter = createCounter(10);
console.log(myCounter()); // 输出 11
console.log(myCounter()); // 输出 12

在上面的示例中，createCounter 执行完毕后，其返回值赋给了 myCounter。常规理解中，局部变量 count 随着函数结束应该被销毁，但后续调用 myCounter() 时依然能够顺利修改并读取 count。这种将函数与创建它的外部词法环境打包关联在一起的实体，就是闭包（Closure）。

图 1 说明：嵌套函数生成时自动记录外层环境引用，层层回溯直至全局

二、闭包形成的完整底层运转过程

许多初学者容易困惑：函数调用结束后，栈帧已经销毁，为什么其中的变量没有消失？要弄清这个问题，需要区分执行栈（Call Stack）与堆内存（Heap）各自的职责。

1. 函数调用与环境记录创建

当外层函数被调用时，JavaScript 引擎会为其实例化一个“执行上下文”（Execution Context）。上下文内部包含一个“词法环境”（Lexical Environment），里面保存了当前作用域声明的所有变量、函数以及形参列表。这个词法环境分配在堆内存中。

2. 嵌套函数定义时的静态绑定

在外层函数执行期间，遇到内部函数的定义语句时，引擎会创建一个函数对象，并将当前正在执行的外部函数的词法环境引用写入该内部函数的 [[Environment]] 内部槽位。这一步在代码编译与运行阶段由词法结构决定，不可动态替换。

3. 执行栈出栈与垃圾回收的可达性判断

当外层函数执行完毕后，它的执行上下文确实会从调用栈顶弹出，不再占用执行栈空间。然而，由于外层函数将内部函数作为返回值输出（或挂载在全局对象、DOM事件上），此时存在一个全局可达的变量持有着内部函数对象的引用；而内部函数的 [[Environment]] 又持有着外层函数词法环境的引用。

现代 JavaScript 引擎的垃圾回收器采用标记清除算法（Mark-and-Sweep）。从根对象（如 Window 或 Global）出发遍历对象图时，由于引用链路依然完整连通，引擎判定该外部词法环境仍然是“可达的”（Reachable），因此不会将其作为垃圾释放，而是持久保存在堆内存中。

图 2 说明：闭包生命周期的四个关键节点与内存堆栈状态转换

三、嵌套函数访问外部变量的核心机制

嵌套函数能够访问外部变量，绝非凭空产生，而是遵循 JavaScript 规范中严谨的变量解析规则（Identifier Resolution）以及引用绑定机制。

1. 作用域链的向上解析规则

当嵌套函数内部需要访问某个标识符（例如 count）时，JavaScript 引擎会执行如下步骤：

1. 检查自身作用域：查看当前函数内部是否声明了该变量。如果有，直接使用自身的局部变量（发生变量遮蔽/Shadowing）；
2. 沿指针向上一级查找：若当前作用域不存在该变量，则沿着 [[Environment]] 指针前往上一级外部函数的词法环境进行匹配；
3. 递归上溯直至全局：如果在上一级仍未找到，继续沿链向上查找，直到最顶层的全局环境；
4. 抛出错误或隐式处理：若检索到全局作用域仍未找到该标识符，在严格模式下抛出 ReferenceError。

2. 核心本质：捕获“变量引用”而非“数值副本”

这是闭包最容易引起混淆、也最核心的一个特性：闭包捕获的是外部词法环境中的变量引用（Live Binding），而不是创建快照或数值拷贝。

这意味着：如果外部函数中有多个嵌套函数访问同一个变量，它们实际上共享同一块变量存储空间；若外部变量的值发生改变，嵌套函数下一次访问时读取到的就是最新变化的值，而非最初的值。

function createSharedStore() {
  let value = "初始状态";

  function reader() {
    return `当前值是: ${value}`;
  }

  function writer(newValue) {
    value = newValue; // 直接修改外部环境中的变量
  }

  return { reader, writer };
}

const store = createSharedStore();
console.log(store.reader()); // "当前值是: 初始状态"

store.writer("更新后的数据");
console.log(store.reader()); // "当前值是: 更新后的数据" —— 共享同一个实时引用

图 3 说明：闭包捕获的是内存中的变量槽位指针，实现多函数联动共享

四、嵌套函数闭包的实际应用场景

掌握闭包机制能够直接赋能实际开发。以下是日常工程中最典型且符合最佳实践的三类应用场景：

1. 数据私有化与模块封装

JavaScript 早期没有原生的 #private 字段语法，开发者普遍利用嵌套函数和闭包来隐藏内部细节，仅对外暴露受控的操作接口，防止外部代码直接篡改关键状态。

function createBankAccount(initialBalance) {
  let balance = initialBalance; // 私有变量，外界无法直接访问

  return {
    deposit(amount) {
      if (amount > 0) {
        balance += amount;
      }
    },
    withdraw(amount) {
      if (amount > 0 && amount <= balance) {
        balance -= amount;
        return true;
      }
      return false;
    },
    getBalance() {
      return balance; // 仅暴露只读查询入口
    }
  };
}

const account = createBankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150
console.log(account.balance);       // undefined (外部无法直接读取或修改)

2. 函数柯里化与参数复用（Currying）

通过外层函数接收基础配置参数，内层嵌套函数接收具体操作参数，从而生成高度定制化的专门函数，避免重复传递通用参数。

function createTaxCalculator(rate) {
  // rate 作为外部变量被保存在闭包中
  return function(amount) {
    return amount * (1 + rate);
  };
}

const calculateStandardTax = createTaxCalculator(0.13); // 预设 13% 税率
const calculateReducedTax = createTaxCalculator(0.05);  // 预设 5% 税率

console.log(calculateStandardTax(200)); // 226
console.log(calculateReducedTax(200));  // 210

3. 事件监听与异步任务中的状态保持

在前端交互或定时器中，通过嵌套函数将特定业务数据绑定到回调函数上，确保在将来的某个时刻执行时依然能够精准读取上下文数据。

function attachButtonHandler(buttonElement, buttonId) {
  let clickCount = 0;

  // 事件回调作为嵌套函数形成闭包
  buttonElement.addEventListener("click", function() {
    clickCount += 1;
    console.log(`按钮 [${buttonId}] 被点击了 ${clickCount} 次`);
  });
}

五、常见陷阱与避坑指南

理解闭包的同时，也必须认清容易引发逻辑 Bug 和性能隐患的地方。

1. 经典循环变量引用陷阱（var 与 let 的区别）

最著名的闭包陷阱是在 for 循环中绑定异步事件或定时器：

// 错误示范：使用 var
for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出：4, 4, 4
  }, 100);
}

原因分析：var 声明的变量具有函数级作用域（或全局作用域），并不存在块级作用域。这意味着整轮循环中只有一个共享的变量 i。当 100ms 后定时器回调执行时，循环早已结束，i 的最终值已变成 4，所有嵌套闭包沿着作用域链读取到的都是同一个 i。

现代解决方案：将 var 替换为 ES6 的 let：

// 正确做法：使用 let 创建块级作用域
for (let i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出：1, 2, 3
  }, 100);
}

let 关键字在每次循环迭代时都会创建一个独立的块级词法环境，每个定时器内部嵌套函数所绑定的闭包各自持有一份当前迭代周期的 i，因此能准确输出 1、2、3。

2. 内存泄漏隐患与及时解绑

由于闭包会阻止其所引用的外部变量被垃圾回收，如果一个长生命周期的对象（例如挂载在 window 上的全局模块或未注销的 DOM 监听器）持续持有包含大型数据结构（如大量 ArrayBuffer 或深层树对象）的闭包，这些数据将永久占用内存，导致内存泄漏。

let bigDataProcessor = (function() {
  let hugeBuffer = new Array(1000000).fill("data");

  return function() {
    console.log("处理数据，长度:", hugeBuffer.length);
  };
})();

// 执行业务
bigDataProcessor();

// 不再使用时显式切断引用，允许垃圾回收器清理堆内存
bigDataProcessor = null;

图 4 说明：JavaScript 嵌套函数形成闭包与访问外部变量的核心要点速览

六、总结

在 JavaScript 中，“嵌套函数形成闭包并访问外部变量”并不是某种特殊的语法技巧，而是语言规范设计中词法作用域与堆内存垃圾回收规则自然组合的结果：

• 怎么形成：在函数内部嵌套定义子函数，子函数在创建时自动通过 [[Environment]] 槽位锁定外层父级词法环境；当子函数被保留并跨越父级调用栈生命周期时，闭包便正式确立；
• 怎么访问：执行时先查找自身局部作用域，未命中则沿着隐藏的作用域链指针向外层环境逐级检索；所访问的是堆中环境记录的实时引用，支持状态持久化累加与多闭包联动。

掌握了这一底层运转链条，开发者就能在保证代码模块化封装与状态管理灵活性的同时，游刃有余地避免内存滞留和作用域混淆等常见问题。