JavaScript 闭包在模块私有变量中的实际应用

在 JavaScript 开发中，防止全局变量污染是构建稳定应用的关键。直接在全局作用域定义变量极易导致命名冲突和状态被意外修改。利用闭包特性创建模块，可以完美实现变量的私有化，只暴露必要的操作接口。

第一步：认识全局变量的风险

如果不使用模块化技术，变量通常直接定义在根层级。任何脚本都能随意修改这些数据，导致程序行为不可预测。

1. 打开浏览器的开发者工具控制台。
2. 输入以下代码并回车，模拟定义一个全局计数器：

var globalCounter = 10;

function addGlobal() {
    globalCounter += 1;
    return globalCounter;
}

3. 执行 addGlobal() 函数，可以看到计数器变成了 11。
4. 输入 globalCounter = 999 并回车。
5. 再次 调用 addGlobal()，结果变成了 1000。

这直接暴露了问题：外部代码可以直接篡改 globalCounter，破坏了程序的逻辑完整性。

第二步：构建闭包外壳

要解决这个问题，利用 JavaScript 的函数作用域特性，将变量包裹在一个函数内部。这个函数会立即执行，并返回一个包含公共方法的对象。这就是“立即调用函数表达式”（IIFE）结合闭包的核心思想。

1. 编写以下基础结构代码：

const MyModule = (function() {
    // 在这里定义的变量，外部无法直接访问
    var privateCounter = 0;

    // 返回一个对象，包含被允许操作的方法
    return {
        // 方法将在下一步填充
    };
})();

2. 观察 上述代码，privateCounter 被包裹在 (function(){ ... })() 内部。
3. 确认 外部无法通过 MyModule.privateCounter 访问到该变量，这步操作实现了第一层隔离。

第三步：定义特权方法（闭包的应用）

虽然外部访问不到变量，但内部定义的函数可以“记住”并访问它。这些函数形成了闭包，它们是连接私有变量和外部世界的桥梁。

1. 修改 MyModule 的代码，在 return 语句之前 添加 两个内部函数：

const MyModule = (function() {
    var privateCounter = 0;

    function changeBy(val) {
        privateCounter += val;
    }

    return {
        increment: function() {
            changeBy(1);
        },
        decrement: function() {
            changeBy(-1);
        },
        value: function() {
            return privateCounter;
        }
    };
})();

2. 分析 代码逻辑：
   • privateCounter 是私有变量。
   • changeBy 是私有辅助函数，不对外暴露。
   • increment、decrement 和 value 是公共方法，它们构成了闭包，持续引用着 privateCounter。

第四步：验证模块的封装性

通过调用暴露出的公共接口，验证数据的隐藏与操作的有效性。

1. 执行 以下代码序列，测试模块功能：

console.log(MyModule.value()); // 输出: 0
MyModule.increment();
MyModule.increment();
console.log(MyModule.value()); // 输出: 2
MyModule.decrement();
console.log(MyModule.value()); // 输出: 1

2. 尝试 直接访问私有变量：

console.log(MyModule.privateCounter); // 输出: undefined

3. 尝试 直接重置计数器：

MyModule.privateCounter = 0;
console.log(MyModule.value()); // 输出: 1 (不受影响)

结果表明，外部无法破坏内部状态，只能通过规定的 increment 或 decrement 方法来改变数据。

第五步：实现数据独立性（创建实例）

上述模式创建了一个单例。如果需要多个独立的计数器模块，可以将这个封装过程改写为一个工厂函数。

1. 定义 一个名为 createCounter 的函数：

var createCounter = function() {
    var privateCounter = 0;

    function changeBy(val) {
        privateCounter += val;
    }

    return {
        increment: function() {
            changeBy(1);
        },
        decrement: function() {
            changeBy(-1);
        },
        value: function() {
            return privateCounter;
        }
    };
};

2. 调用 createCounter 创建两个独立的实例：

var counterA = createCounter();
var counterB = createCounter();

3. 操作 两个实例，观察它们是否互不干扰：

counterA.increment();
counterA.increment();

console.log(counterA.value()); // 输出: 2
console.log(counterB.value()); // 输出: 0

counterB.increment();
console.log(counterB.value()); // 输出: 1
console.log(counterA.value()); // 输出: 2 (保持不变)

作用域与内存模型解析

为了更清晰地理解闭包如何维持私有变量的状态，可以通过以下流程图查看作用域链与内存引用关系。

通过上述流程可以看出：

1. 每次 调用 createCounter 都会生成一个新的函数作用域。
2. 新作用域内拥有独立的 privateCounter 变量副本。
3. 返回的对象（counterA 或 counterB）始终持有对其创建时作用域的引用，因此变量不会被垃圾回收机制回收，直到对象本身被销毁。