JavaScript 闭包实现自增计数器的正确方式

碧海醫心

发布时间：2026-02-22 09:35:02

358人浏览过

来源于php中文网

原创

JavaScript 闭包实现自增计数器的正确方式

本文详解 javascript 闭包中常见的“计数器不递增”问题，指出错误在于每次调用工厂函数都重新初始化变量；通过返回函数而非调用结果，才能真正利用闭包持久化状态。

本文详解 javascript 闭包中常见的“计数器不递增”问题，指出错误在于每次调用工厂函数都重新初始化变量；通过返回函数而非调用结果，才能真正利用闭包持久化状态。

在 JavaScript 中，闭包是函数与其词法环境的组合，常被用于封装私有状态（如计数器、ID 生成器等）。但初学者常因对“何时创建闭包”和“何时执行函数”混淆，导致预期外的行为。以下代码就是一个典型反例：

function Unique_id2() {
    let counter = 0;
    function f() { return counter++; }
    return f(); // ❌ 错误：立即执行并返回数值 0
}

let f = Unique_id2; // 注意：这里只是引用函数，未调用
console.log(f()); // 实际执行的是 Unique_id2() → 初始化 counter=0 → 执行 f() → 返回 0
console.log(f()); // 再次执行 Unique_id2() → counter 再次重置为 0 → 返回 0

输出全为 0 的根本原因在于：每次调用 Unique_id2() 都会新建一个作用域，counter 总是从 0 开始，且 f() 被立即执行（return f()），返回的是数值而非函数本身。因此，无论你调用多少次 Unique_id2()，得到的永远是初始值。

✅ 正确做法是：返回内部函数 f（即闭包），而非 f() 的执行结果。这样外部变量保存的是该闭包的引用，后续调用它时，始终操作同一份 counter：

function Unique_id2() {
    let counter = 0;
    return function() { 
        return counter++; 
    };
}

console.log("UID");
const uidGenerator = Unique_id2(); // ✅ 调用一次，创建闭包，counter 初始化为 0
console.log(typeof uidGenerator); // "function"

console.log(uidGenerator()); // 0
console.log(uidGenerator()); // 1
console.log(uidGenerator()); // 2
console.log(uidGenerator()); // 3
console.log(uidGenerator()); // 4

? 关键理解：

迷你天猫商城
迷你天猫商城是一个基于Spring Boot的综合性B2C电商平台，需求设计主要参考天猫商城的购物流程：用户从注册开始，到完成登录，浏览商品，加入购物车，进行下单，确认收货，评价等一系列操作。作为迷你天猫商城的核心组成部分之一，天猫数据管理后台包含商品管理，订单管理，类别管理，用户管理和交易额统计等模块，实现了对整个商城的一站式管理和维护。所有页面均兼容IE10及以上现代浏览器。部署方式1、项目

下载

立即学习“Java免费学习笔记（深入）”；
Unique_id2() 是闭包工厂函数——执行一次，生成一个独立的、带私有 counter 的闭包；

uidGenerator 是该闭包的引用，后续所有调用共享同一 counter；
若需多个独立计数器，可多次调用 Unique_id2()，例如：
const gen1 = Unique_id2();
const gen2 = Unique_id2();
console.log(gen1()); // 0
console.log(gen1()); // 1
console.log(gen2()); // 0 ← 独立状态