javascript如何利用闭包与作用域管理状态【教程】_网络技术

javascript如何利用闭包与作用域管理状态【教程】

发布时间 - 2026-01-30 00:00:00 点击率：次

闭包是JavaScript中保留变量值且不污染全局作用域的唯一可靠方式；其本质是内部函数引用外部变量并在外部函数返回后仍可访问，需通过返回或赋值使内部函数逃逸作用域。

JavaScript 中闭包不是状态管理的“高级技巧”，而是唯一可靠的方式——只要你需要在函数调用后仍保留某个变量的值，且不污染全局作用域，闭包就是事实标准。

为什么 `var` 声明的变量在循环中会丢失预期值

这是闭包最常被误解也最容易出错的场景。比如用 for 循环绑定点击事件：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3

原因：var 是函数作用域，整个循环共用一个 i；当异步执行时，循环早已结束，i 已变为 3。

修复方式一：用 let 替代 var（块级作用域，每次迭代新建绑定）
修复方式二：显式创建闭包，把当前 i 作为参数传入立即执行函数
修复方式三：用 setTimeout 的第三个参数传参，避免捕获外部变量

`return` 函
数内部定义的函数才是闭包的关键动作

闭包的本质是「内部函数引用了外部函数的变量，并在外部函数返回后依然能访问它」。光有嵌套不够，必须让内部函数逃逸出作用域。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const inc = createCounter();
console.log(inc()); // 1
console.log(inc()); // 2

这里 createCounter 执行完后，其局部变量 count 并未销毁，因为返回的匿名函数仍持有对它的引用。

如果返回的是普通值（如 return count），就不是闭包
如果内部函数没被返回、也没被赋给外部变量，垃圾回收器通常会清理掉外部作用域
多次调用 createCounter() 会生成彼此隔离的状态，互不影响

用闭包模拟私有属性和模块模式

ES6 模块和 #private 字段出现前，闭包是实现真正私有数据的唯一手段。

const createBankAccount = function(initial) {
  let balance = initial; // 外部不可直接访问

  return {
    deposit: (n) => { balance += n; },
    withdraw: (n) => { if (n <= balance) balance -= n; },
    getBalance: () => balance
  };
};

const account = createBankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150
console.log(account.balance);      // undefined

注意：balance 不是“被隐藏”，而是根本不在对象属性链上——它只存在于闭包环境中。

所有方法共享同一个 balance，因为它们都从同一个外层函数作用域捕获变量
无法通过 Object.keys()、for...in 或 JSON.stringify() 访问或序列化该状态
调试时在 Chrome DevTools 中可看到 “Closure” 作用域面板，但不能修改其中变量

闭包真正的复杂点不在写法，而在于生命周期判断：你得清楚哪些变量被谁引用、何时释放、会不会意外造成内存泄漏——比如给 DOM 元素绑定的闭包回调，若元素被移除却没解绑，闭包连带外部作用域就一直驻留。

# javascript # es6 # java # js # json # 作用域 # 点击事件 # 垃圾回收器 # 为什么 # chrome # chrome devtools # Object # count # for # 局部变量 # 循环 # private # var # 闭包 # 对象 # 事件 # dom # 异步 # 绑定 # 并在 # 的是 # 这是 # 才是 # 也没 # 会不会 # 只要你 # 第三个 # 最容易

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：专项附加扣除填错了怎么办个人所得税APP修改申报信息教程

下一篇：Hotmail邮箱无法连接到服务器 Hotmail邮箱连接失

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：专项附加扣除填错了怎么办个人所得税APP修改申报信息教程

下一篇：Hotmail邮箱无法连接到服务器 Hotmail邮箱连接失