JavaScript 闭包核心原理解析与实战应用

JavaScript 闭包核心原理解析与实战应用

闭包是 JavaScript 中至关重要的概念，对于初学者而言，它往往显得抽象且难以理解，尤其是依据 ECMAScript 规范给出的定义，若缺乏实际编码经验，很难仅凭定义掌握其精髓。因此，本文避免冗长的理论阐述，直接通过代码实例解析，帮助读者快速掌握闭包的核心用法。

闭包的基础概念解析

1、闭包的基础概念解析

学习新技术时，首要步骤通常是查看示例代码。对于开发者而言，代码往往比自然语言更直观地揭示事物本质。闭包在 JavaScript 中无处不在，例如 jQuery 和 Zepto 的核心代码均包裹在大型闭包中。为了建立直观认知，我们先从最基础的闭包示例开始。

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var c = A();
c();//Hello Closure!

这是结构最简单的闭包形式，若再简化则不再构成闭包。

建立初步印象后，我们需要对比其与普通函数的差异，从而在代码中准确识别闭包结构。

上述代码逻辑可转化为以下自然语言描述：

• (1) 定义一个普通函数 A
• (2) 在函数 A 内部定义另一个普通函数 B
• (3) 在函数 A 中返回函数 B（准确说是返回 B 的引用）
• (4) 执行函数 A()，并将返回值赋值给变量 c
• (5) 调用执行 c()

将上述五个步骤概括为一句话：

函数 A 的内部函数 B 被函数 A 外部的变量 c 所引用。

对这句话进行规范化表述，即得到闭包的定义：

当一个内部函数被其外部函数之外的变量引用时，便形成了闭包。

无需刻意死记硬背该定义，其核心在于理解上述五个步骤的操作过程即是对闭包定义的具体阐述。

因此，当执行完上述五个步骤的操作时，即意味着已经创建了一个闭包。

这就是闭包的基本形态。

闭包的实际作用

2、闭包的实际作用

在探讨闭包作用前，需先了解 JavaScript 的垃圾回收（GC）机制：若对象不再被任何引用指向，GC 将回收该对象；反之，若存在引用，对象将常驻内存。

在前述示例中，函数 B 定义于 A 内部，故 B 依赖于 A；而外部变量 c 引用了 B，导致 A 被间接引用。这意味着 A 不会被 GC 回收，将一直保留在内存中。为验证这一推论，对示例进行如下改进：

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

count 是函数 A 中的局部变量，其值在函数 B 中被修改。每次执行 B，count 值累加 1。因此，A 中的 count 变量始终驻留内存。

这便是闭包的主要作用：当我们需要在模块中定义一个变量，既希望其长期驻留内存，又避免污染全局命名空间时，闭包是理想的解决方案。

高级写法：立即执行函数

3、高级写法：立即执行函数

前述写法虽简单原始，但在实际开发尤其是大型 JS 框架中较少直接采用。此处展示该写法旨在减少干扰因素，聚焦核心逻辑。下面通过常用写法演示一个简单的组件示例：

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

该组件功能为初始化容器，支持添加或移除子容器。功能虽简单，但涉及另一个重要概念：立即执行函数（IIFE）。此处仅作简要了解，重点在于理解这种写法如何实现闭包功能。

可将上述代码结构分为两部分：(function(){})()。红色部分为表达式，该表达式本身是一个匿名函数，其后附加的 () 表示执行该匿名函数。

因此，这段代码的执行过程可分解如下：

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

在此代码中似乎未看到明显的返回值，看似不满足闭包条件，但需注意以下关键语句：

window.jView = obj; obj 是在函数 f 内部定义的对象，包含一系列方法。执行 window.jView = obj 即在全局 window 对象上定义变量 jView，并指向 obj 对象。此时，全局变量 jView 引用了 obj，而 obj 中的方法又引用了 f 内部的变量 viewport。因此，f 内部的 viewport 不会被 GC 回收，始终保存于内存中，这种写法满足闭包条件。

简要总结

4、简要总结

这是理解闭包最基础的方式。尽管闭包还有更深层的原理，涉及 JavaScript 执行环境（execution context）、活动对象（call object）以及作用域（scope）和作用域链（scope chain）的运行机制，但初学者暂无需深入这些细节。在建立基础理解后，务必在实际项目中应用，随着使用频率增加，自然会对闭包产生更深层次的理解。

以上就是本文的全部内容，希望对读者的学习有所帮助。