JavaScript学习重点：变量、作用域与闭包核心解析

作者：木棉

时间：2026-10-30

深入解析JavaScript核心机制：全面剖析var、let与const的生命周期与暂时性死区，拆解词法作用域与作用域链查找规则，透视闭包的堆内存驻留本质与工程实践中的内存管理。

文章目录

理解 JavaScript 的执行机制，核心在于把握三个层层递进的概念：变量声明决定了数据的生命周期与访问约束；作用域界定了代码执行时变量的查找边界与权限；而闭包则是词法作用域与函数一等公民特性结合下，函数对外部环境引用的自然保持。掌握这三者的内在联系，是编写健壮代码、规避作用域污染与排查隐蔽内存问题的基础。

一、变量声明机制与生命周期：var、let 与 const

在 ECMAScript 6 推出之前，JavaScript 仅有 var 一种变量声明方式。var 存在函数级作用域和变量声明提升（Hoisting）特性，容易引发变量意外覆盖和全局污染。现代 JavaScript 引入了 let 和 const，确立了块级作用域以及“暂时性死区”（Temporal Dead Zone，简称 TDZ）机制。

我们可以从底层生命周期的三个阶段来审视它们之间的关键差异：创建（Declaration）、初始化（Initialization）和赋值（Assignment）。

var 的生命周期：当进入函数或全局上下文时，var 变量的创建与初始化被一并提升到作用域顶端，并赋予初始值 undefined。这意味着在声明语句执行之前读取该变量，不会报错而是返回 undefined。
let 与 const 的生命周期：进入作用域时，引擎同样会预先扫描并创建变量名（即存在声明提升），但不会立即进行初始化。从作用域开始到正式执行声明语句之间的区域，该变量处于暂时性死区。若在此区间内尝试访问，JavaScript 引擎会直接抛出 ReferenceError。只有执行到声明行时，let 才会被初始化（若未提供值则初始化为 undefined，const 则必须在此时完成赋值）。

JavaScript学习重点：变量、作用域与闭包核心解析 — 图 1：var 与 let/const 的生命周期步骤与暂时性死区对比

条件一致下的关键差异对比

为了直观理解两者的差异，我们可以在相同的块结构中观察变量重声明、跨块访问与提前引用的行为：

对比维度	var	let	const
作用域范围	函数作用域 / 全局作用域	块级作用域（`{ ... }`）	块级作用域（`{ ... }`）
声明提升表现	提升声明并初始化为 `undefined`	提升创建，但未初始化（进入 TDZ）	提升创建，但未初始化（进入 TDZ）
重复声明	允许在同一作用域内重复声明	同一作用域内禁止重复声明（SyntaxError）	同一作用域内禁止重复声明（SyntaxError）
重新赋值	允许重新赋值	允许重新赋值	声明即必须赋值，不可重新绑定引用
顶层挂载	全局作用域下挂载到 `window`	不作为全局对象的属性挂载	不作为全局对象的属性挂载

// 示例 1：暂时性死区（TDZ）的触发机制
function inspectScope() {
  // 处于 blockVar 的暂时性死区中
  try {
    console.log(blockVar); // 抛出 ReferenceError: Cannot access 'blockVar' before initialization
  } catch (err) {
    console.log("捕获到异常：" + err.message);
  }

  let blockVar = 100; // 声明到达，TDZ 结束
  console.log(blockVar); // 正常输出: 100
}
inspectScope();

二、词法作用域与作用域链的查找规则

JavaScript 采用的是词法作用域（Lexical Scoping，也称静态作用域），而不是动态作用域。所谓词法作用域，是指变量的作用域在代码书写完成时就已经被确定，而不是取决于函数在何处被调用。

作用域的嵌套与查找机制

当代码执行到一个特定上下文时，JavaScript 引擎会为当前环境创建一个环境记录（Environment Record）。如果在一个函数内部访问某个标识符（变量或函数名），引擎会按照以下步骤进行检索：

首先在当前上下文的环境记录中检索该标识符；
如果找到了对应的绑定，则直接读取其值并终止查找；
如果当前环境未找到，引擎会顺着当前环境保存的外层词法引用（Outer Reference），移动到上一层父级环境记录中查找；
该过程持续进行，直到抵达最顶层的全局作用域（Global Scope）；
如果在全局环境中仍然无法找到该标识符，非严格模式下直接赋值会隐式创建全局变量，而在严格模式下或执行读取操作时，将抛出 ReferenceError。

值得强调的是，词法作用域的界定只由函数声明时的位置决定。无论函数后续被赋值给其他变量、作为参数传递给第三方函数，还是在全局环境中触发调用，其父级作用域链条在定义那一刻就已经绑定牢固。这也是闭包得以成立的基石。

三、闭包的本质：从执行栈销毁到内存引用的留存

在许多语言中，当函数执行完毕后，其局部变量所占用的栈帧空间会随函数调用结束而彻底释放与销毁。但在 JavaScript 中，如果一个内部函数引用了外层函数的变量，并将该内部函数作为返回值输出（或挂载到持久生命周期的对象、回调中），就形成了闭包（Closure）。

从规范层面定义：闭包是由函数以及声明该函数的词法环境组合而成的实体。

闭包在调用栈与堆内存中的底层图景

通常，初学者容易产生一种误区：“函数调用完毕，变量就自然不存在了”。事实上，JavaScript 引擎会根据变量是否被逃逸引用（Escape Analysis），决定将变量分配在执行栈还是堆内存（Heap）中：

当外层函数 createCounter() 执行时，其执行上下文（Execution Context）被压入调用栈；
createCounter() 返回内部函数 counter()。此时外层函数执行结束，其上下文从调用栈弹出并销毁；
但由于返回的 counter 函数内部带有 [[Scopes]] 内部槽位，该槽位强引用了外层的词法环境记录（Lexical Environment）；
JavaScript 垃圾回收器（Garbage Collector）基于可达性算法（Mark-and-Sweep）工作。既然存在活跃变量持有该词法环境的引用，引擎就绝对不会回收这块堆内存，从而实现了外层变量状态的持久保留。

闭包的核心工程应用场景

闭包绝不仅是一个理论考点，在现代前端开发中，它是实现下列设计模式的核心支柱：

1. 数据私有化与模块封装：在没有类私有字段（#privateField）前，闭包是唯一能够构造真正私有变量的方法，外部代码无法绕过接口直接窜改数据。

function createBankAccount(initialBalance) {
  let balance = initialBalance; // 处于闭包私有环境中，外部无法直接访问

  return {
    deposit(amount) {
      if (amount > 0) balance += amount;
      return balance;
    },
    getBalance() {
      return balance;
    }
  };
}

const myAccount = createBankAccount(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // 1500
console.log(myAccount.balance);      // undefined，外部无法直接读写私有变量

2. 高阶函数与状态维持（如防抖与节流）：防抖函数通过在闭包中维护一个 timer 句柄，实现多次高频触发时仅执行最后一次：

function debounce(fn, delay) {
  let timer = null; // 闭包常驻定时器引用

  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

四、经典避坑点与内存管理实践

闭包虽然强大，但如果理解不深，容易在两处关键场景踩坑：循环中的异步状态共享问题，以及长时间不释放导致的内存泄漏。

1. 经典循环变量绑定误区

最常见的面试与实战陷阱是在 for 循环中绑定异步回调：

// 错误案例：使用 var 导致所有定时器共享同一个变量
for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log("var 循环输出: " + i); // 三次全部输出 4
  }, 100);
}

// 正确解法一：使用 ES6 的 let 自动创建块级作用域
for (let j = 1; j <= 3; j++) {
  setTimeout(function() {
    console.log("let 循环输出: " + j); // 依次输出 1, 2, 3
  }, 100);
}

// 正确解法二：使用 IIFE 闭包手动固化每次循环的状态
for (var k = 1; k <= 3; k++) {
  (function(currentK) {
    setTimeout(function() {
      console.log("IIFE 闭包输出: " + currentK); // 依次输出 1, 2, 3
    }, 100);
  })(k);
}

为什么 let 能解决这个问题？
在 for (let j = 1; ...) 循环中，JavaScript 引擎在每次循环迭代时都会为循环体创建一个全新的块级词法环境，并将上一次迭代结束时的 j 值复制进去。因此，每个 setTimeout 闭包捕获的都是属于当前迭代的独立 j 副本，互不干扰。

2. 内存泄漏与手动解除引用

闭包会使外层函数的词法环境持续保存在堆内存中。如果将闭包函数绑定到长期存活的对象上（例如全局对象、DOM 事件监听器、单例模块等），并且闭包环境内持有了占用体积较大的数据（如大型数组、缓存对象或 DOM 节点引用），这些数据就无法被垃圾回收。

防范原则：

当组件销毁或页面卸载时，及时注销挂载在全局或 DOM 上的事件侦听函数；
对于不再需要的闭包函数引用，显式将其赋值为 null，切断可达引用链：

let heavyWorker = setupWorkerWithClosure();
// 业务操作完成，不再需要该工作器
heavyWorker = null; // 断开根引用，通知垃圾收集器回收对应的堆内存

五、变量、作用域与闭包核心全景总结

回顾整套知识链路，我们可以建立起清晰的逻辑对应图景：

通过上述对变量生命周期阶段、词法作用域链单向查找机制以及闭包在堆内存中引用留存原理的解析，我们可以清楚地看到：变量提供了存储单元，作用域规划了访问秩序，而闭包赋予了函数穿越生命周期边界的能力。在实际项目开发中，遵循 const/let 优先原则、避免隐式全局声明、理解作用域链查找成本并在适当时机解除闭包引用，将有助于编写出结构清晰、执行高效且内存稳定的 JavaScript 程序。