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

胖枫吖_6664

胖枫吖_6664

2026-01-13

340人浏览

原创

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

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

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

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

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

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

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

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

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

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 声明的循环变量在闭包中会共享同一个绑定,导致所有回调看到最后的值:

for (var i = 0; i  console.log(i), 100); // 输出 3, 3, 3
}

修复方式:

JavaScript 测试模式
JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略,包括单元测试、集成测试和端到端测试,涵盖模拟、测试夹具和测试驱动开发。在编

下载
  • 改用 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 可以查哪些闭包持有了不该持有的对象。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.08.11

3006

5

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

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

2023.11.06

6279

7

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

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

2026.03.24

4487

22

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

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

2023.11.20

3968

5

php中foreach用法
php中foreach用法

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

2025.12.04

858

13

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

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

2024.01.03

4656

7

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

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

2025.12.06

326

9

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

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

2025.07.29

5233

19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

5036

8

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习