0

0

JavaScript的闭包是什么_它有什么实际用途【教程】

狼影

狼影

发布时间:2026-02-02 16:49:28

|

180人浏览过

|

来源于php中文网

原创

闭包是JavaScript中函数作用域与词法环境自然结合的必然结果;其形成依赖函数的[[Environment]]属性和自由变量查找机制,用于封装私有状态、保持异步上下文,并需警惕内存泄漏。

javascript的闭包是什么_它有什么实际用途【教程】

闭包不是语法糖,也不是高级技巧——它是 JavaScript 中函数作用域和词法环境自然结合的必然结果。只要一个函数在定义它的词法作用域之外被调用,且它引用了该作用域中的变量,闭包就产生了。

闭包是怎么形成的:看懂 [[Environment]] 和自由变量

每个函数对象内部都有一个隐藏属性 [[Environment]],它指向函数定义时所在的作用域链。当函数执行时,如果访问了自己作用域中未声明的变量(即“自由变量”),引擎就会顺着 [[Environment]] 一层层向上查找——这个被保留下来的外层词法环境,就是闭包的核心。

常见错误现象:

  • 循环中用 var 声明变量 + 异步回调,所有回调都输出最后一个值(因为共享同一个变量绑定)
  • 误以为 setTimeout 的回调“捕获了当前值”,其实捕获的是变量引用

正确做法是让每次迭代拥有独立作用域:

立即学习Java免费学习笔记(深入)”;

for (var i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(() => console.log(i), 100);
  })(i);
}
// 或更现代的写法:
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

let 每次迭代都会创建新绑定,[[Environment]] 指向各自独立的块级环境,本质仍是闭包。

封装私有状态:用闭包替代 class 私有字段(尤其兼容旧环境)

ES6 class#private 字段在 IE 和部分老版本 Node.js 中不可用,而闭包在任何支持函数的一版 JS 中都有效。

使用场景:

Android的资源与国际化设置 中文WORD版
Android的资源与国际化设置 中文WORD版

本文档主要讲述的是Android的资源与国际化设置;资源是外部文件(不含代码的文件),它被代码使用并在编译时编入应用程序。Android支持不同类型的资源文件,包括XML,PNG以及JPEG文件XML文件根据描述的不同有不同格式。这份文档描述可以支持什么样的文件,语法,以及各种格式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
  • 模块导出 API 时隐藏实现细节(如缓存、计数器、配置)
  • 避免全局污染或意外修改关键状态
  • 需要精细控制 getter/setter 行为(比如带校验的 setter)

示例:

function createCounter() {
  let count = 0; // 外部无法直接访问
  return {
    increment() { count++; },
    get value() { return count; },
    reset() { count = 0; }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.value); // 1
console.log(counter.count); // undefined —— 真正私有

注意:这里返回的对象方法都闭包了 count,但对象本身没有暴露该变量。

事件监听与定时器中保持上下文:为什么 this 不是唯一问题

很多人只记得用 .bind() 或箭头函数解决 this 绑定,却忽略另一个更隐蔽的问题:依赖的局部变量可能已变更或销毁。

典型场景:

  • 组件卸载后,异步回调仍尝试更新已销毁的 DOM 或 React state
  • 轮询请求中,用户切换页面,旧的 idtoken 仍被后续响应使用

闭包能帮你“冻结”那一刻所需的最小数据集:

function startPolling(id, token) {
  const poll = () => {
    fetch(`/api/data?id=${id}`, {
      headers: { Authorization: `Bearer ${token}` }
    }).then(r => r.json())
      .then(data => updateUI(data));
  };
  const timer = setInterval(poll, 5000);

  // 返回清理函数,利用闭包捕获 timer 和 id
  return () => clearInterval(timer);
}

const stop = startPolling(123, 'abc');
// 后续可安全调用 stop(),无需再传参数

这里 stop 函数闭包了 timer,而不是靠外部变量管理——这是健壮性的关键。

闭包真正的复杂点不在“怎么写”,而在“什么时候不该用”:过度闭包会阻止垃圾回收,导致内存泄漏;在频繁创建函数的循环里(如渲染大量列表项),每个闭包都携带一份环境引用,开销比想象中大。判断依据很简单——只闭包真正需要的数据,其余尽量通过参数传入。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

223

2025.12.24

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6247

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

825

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1072

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1390

2024.03.01

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

45

2026.02.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号