讲师中心 微信公众号
AI工具推荐 视频效率加速

什么是闭包_JavaScript中闭包有什么用途

胖枫吖_6664

胖枫吖_6664

发布时间:2026-01-13 19:43:15

|

340人浏览过

|

来源于php中文网

原创

闭包是JavaScript中函数作用域与词法环境自然结合的必然结果;函数创建时绑定[[Environment]]指向定义时的词法环境,只要能访问外层变量即构成闭包,无论是否返回。

什么是闭包_javascript中闭包有什么用途

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

闭包是怎么形成的?看 function 和 [[Environment]] 的绑定

每个函数对象内部都隐式保存着一个 [[Environment]] 内部属性,指向它被定义时所处的词法环境(比如外层函数的 LexicalEnvironment)。这个绑定在函数创建时就固定了,不会随调用位置改变。

常见错误现象:以为“返回函数”才叫闭包,其实只要函数能读取外层变量,哪怕没返回、没暴露,也已是闭包。

  • setTimeout 回调里访问外层循环变量,是闭包(但常因变量复用出 bug)
  • 事件监听器中引用组件状态,是闭包
  • 模块模式中 return { get, set },是闭包

封装私有状态:用闭包替代 class 里的 #private

在不支持私有字段的老环境(如 IE、部分 Node.js 版本),闭包是唯一可靠的私有数据方案。变量被封闭在外部函数作用域内,外界无法直接访问。

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

function createCounter() {
  let count = 0; // 外部无法触达
  return {
    increment() { count++; },
    value() { return count; }
  };
}

const c1 = createCounter();
c1.increment();
console.log(c1.value()); // 1

注意:count 不是存在 c1 对象上,而是藏在 c1.increment 和 c1.value 共享的闭包环境中。每次调用 createCounter() 都生成独立的闭包,互不影响。

避免循环中闭包捕获同一变量的坑:用 let 或立即执行函数

传统 var 声明的循环变量在闭包中会共享同一个绑定,导致所有回调看到最后的值:

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

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

修复方式:

  • 改用 let(块级作用域,每次迭代新建绑定)
  • 用 IIFE 显式传入当前值:(function(i) { setTimeout(() => console.log(i), 100); })(i)
  • 用 for...of + 解构或数组方法(如 [0,1,2].forEach(i => setTimeout(...)))

本质不是“闭包有问题”,而是对变量绑定机制理解不到位。

内存与调试:闭包让变量无法被 GC,但别盲目“优化”

闭包会延长外层变量的生命周期——只要闭包函数还存活,它引用的外层变量就不会被垃圾回收。这在长期运行的单页应用中可能引发内存泄漏(比如监听器未解绑,却持续引用大对象)。

但反过来,不要因为“闭包占内存”就回避它。现代 JS 引擎(V8)对闭包做了大量优化,比如只保留实际被引用的变量,而不是整个外层作用域。

真正该检查的是:是否无意保留了不需要的引用?比如把整个 this 或 DOM 节点塞进闭包,又忘了清理。

Chrome DevTools 的 Memory > Heap Snapshot 可以查哪些闭包持有了不该持有的对象。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2826

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5659

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4027

2026.03.24

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

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

3448

2023.11.20

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

798

2025.12.04

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4196

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

306

2025.12.06

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

4673

2025.07.29

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn