JavaScript 闭包（Closure）原理详解与作用域链解析

理解函数调用对象与作用域链

在 JavaScript 引擎中，每次函数调用都会创建一个称为“函数调用对象”的局部环境，用于存储该函数内的局部变量和参数。如果函数内部包含嵌套定义的子函数，引擎会在当前调用对象的基础上，再创建一层嵌套的调用对象。这种层层嵌套的结构形成了变量的查找路径，即“作用域链”。

为了直观理解，首先看一个简单的单层函数调用：

function f(x) {
  var a = 10;
  return a * x;
}
console.log(f(6)); // 输出: 60

当执行 f(6) 时，JavaScript 创建了 f 函数的调用对象（文中暂称 f_invokeObj）。该对象中包含两个属性：x（值为 6）和 a（值为 10）。最终返回结果为 60。其内存结构示意如下：

第 1 步：理解嵌套函数的调用对象链

目的：展示当函数内部存在嵌套函数时，如何形成多层调用对象链。
场景：外部函数 f 包含内部函数 g。

考虑以下代码：

function f(x) {
  var a = 10;
  return a * g(x);
  function g(b) {
    return b * b;
  }
}
console.log(f(6)); // 输出: 360

在执行 f(6) 时：

1. Javascript 创建 f_invokeObj，包含 a=10 和 x=6。
2. 解析到内部函数 g 的定义。
3. 调用 g(x) 时，JavaScript 创建 g_invokeObj，包含参数 b=6。
4. g 返回 36，f 返回 10 * 36 = 360。

此时，g 和 f 的调用对象形成了一条链。示意图如下：

第 2 步：验证作用域的最近优先原则

目的：明确当外层和内层变量同名时，JavaScript 如何选择变量。
操作：在同名情况下观察返回值变化。

如果在内外层定义了同名的变量 a：

function f(x) {
  var a = 10;
  return a * g(x);
  function g(b) {
    var a = 1; // 内层遮蔽了外层
    return b * b * a;
  }
}
console.log(f(6)); // 输出: 36 (而非 3600)

在此例中，g_invokeObj 中的 a 值为 1，而 f_invokeObj 中的 a 值为 10。当 g() 执行时，它优先使用自己所在对象链最近处的 a（即 1），从而得到结果 36。这证实了变量查找是从当前作用域向外逐层进行的。

此时的对象链状态如图：

什么是闭包？

从技术定义上看，JavaScript 中的每一个函数都是对象，且都关联着一个特定的调用对象链。只要函数对象存在，其对应的调用对象链就不会被垃圾回收。这种函数对象 + 调用对象链的组合被称为“闭包”（Closure）。

虽然理论上所有函数实例化后都是闭包，但在实际开发中，我们真正关注的是**嵌套函数形成的闭包**。因为内嵌函数引用了外部函数的局部变量，即使外部函数已经执行完毕，这些变量依然保留在内层函数的闭包中，不会被销毁。

第 3 步：构建并观察典型的闭包场景

目的：通过代码演示闭包如何“记住”并保留外部变量。
入口：函数 f 返回内部函数 g。

请看以下经典示例：

var a = "outside";
function f() {
  var a = "inside";
  function g() { return a; }
  return g;
}
var result = f();
console.log(result()); // 输出: "inside"

执行流程分析：

1. 定义阶段：运行 f() 时，创建了 f 的调用对象（包含 a="inside"）和 g 的闭包。
2. 传递阶段：f() 返回函数对象 g，并将其赋值给变量 result。此时 f() 的主体逻辑已经结束，但因为没有其他引用，按理说 f 的调用对象应被回收。
3. 关键维持：由于 result 引用了 g，而 g 的执行依赖于其闭包（即指向 f 调用对象的指针）。因此，f 的调用对象（含 a="inside"）不会消失。
4. 执行结果：调用 result() 时，g 在其闭包中找到 a 并返回 "inside"。

这个例子清晰地展示了闭包的核心能力：**在函数离开后，仍然保持对局部变量的访问权限**。

以上就是 JavaScript 闭包原理、作用域链机制及其实用场景的详细内容，更多关于前端基础知识的资料请关注本站其它相关文章！