【闭包概念】关于闭包概念不同解读——你可以自己理解。

简介: 写在前面:闭包是被讲烂的内容,但是当我不了解的情况下,看过很多教程,听过很多道理,还是无法完全理解闭包这个东西。所以想要写一篇比较详细,前端小白也能够真正理解闭包概念的干货文章,本文参考很多闭包资料,希望能真正把闭包这个东西讲清楚,喜欢的朋友可以点个赞,或者点波关注。首先需要了解一波js变量的作用域以及变量的生存周期。前几天我发在掘金上面了,下面是一个内容概要,墙裂推荐所有小伙伴,还是点进去学习一波,作用域这个问题可以说是闭包最为重要的内容。里面的内容包括:1.变量的作用域(变量的有效范围)。2.变量作用域,js高级程序设计(红宝书)中的解释。3.红宝书中的作用域链栗子(还有一个例子

写在前面:

闭包是被讲烂的内容,但是当我不了解的情况下,看过很多教程,听过很多道理,还是无法完全理解闭包这个东西。所以想要写一篇比较详细,前端小白也能够真正理解闭包概念的干货文章,本文参考很多闭包资料,希望能真正把闭包这个东西讲清楚,喜欢的朋友可以点个赞,或者点波关注。


首先需要了解一波js变量的作用域以及变量的生存周期。

前几天我发在掘金上面了,下面是一个内容概要,墙裂推荐所有小伙伴,还是点进去学习一波,作用域这个问题可以说是闭包最为重要的内容。

里面的内容包括:

1.变量的作用域(变量的有效范围)。

2.变量作用域,js高级程序设计(红宝书)中的解释。

3.红宝书中的作用域链栗子(还有一个例子的解析:画重点,这里关于作用域讲的比较详细,看完这个作用域就了解差不多)。

4.变量的生存周期。

这里是链接,点进去学习一波:js 变量的作用域详解、生存周期,以及一些小细节。


闭包的概念:不同解读一览。

以下节选了一些对闭包概念的不同理解,基本都没偏离本质,我进行一些解释和画重点操作,小伙伴们可以从中挑选一款相对于自己来说比较好理解的概念,自己意会

维基百科

闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍然访问非本地变量

MDN上面这么说:

闭包是一种特殊的对象。闭包是由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

闭包概念 根据《javascript权威指南》里对闭包的解释:

所有的javascript函数都是闭包。而当一个嵌套函数被导出到它所定义的作用域外时,闭包会更有趣。

ps:我们通常意义上的闭包指的是在一个函数内部嵌套另一个函数,这里的概念很有趣。把所有函数都当成闭包,相当于把所有局部环境都当成了一个闭包,细细想想觉得蛮有道理的,这里就见仁见智了。

阮一峰的理解:

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

javascript高级程序设计(红宝书)的解释):

闭包就是指有权访问另一个函数作用域中的变量的函数


感觉这里比较简单且清晰,对此要解释一波,上面的意思是:

闭包是一个函数内部嵌套着另一个函数,而被嵌套的那个函数有权利访问嵌套它的那个函数的作用域中变量。

上面这里分点来读,慢慢读。

1.被嵌套的那个函数

2.有权利访问

3.嵌套它的那个函数

4.的作用域中

5.的变量。


这里有一张帮助你理解闭包概念的图片:

用图片来记忆,记忆效率还是高一点,而且是这么特别的一张图片,这么6的图片,出自一张图搞定闭包概念

image.png

号称一张图搞定闭包概念,哈哈,反正我单单看这张图片,我是猜不透想表达什么

图片解释:描述嵌套函数的闭包情况。

1.打个比方:有一只袜子,它的内部就好比是一个链式作用域

ps:作用域链的定义以及解析,在上面变量部分的链接里面。

2.小人无法直接获得袜子内部的“a”。这里的“a”就好比链式作用域里的一个局部变量;

ps:蓝色圈圈里面的作用域形成了一个闭包,所以外面的无法访问a。

3.蓝色小圆圈就好比是内部链式作用域里的嵌套函数(闭包)。它可以通过链式作用域获取到“a”;

4.蓝色小圆圈通过伸出到袜子外的箭头,让小人可以拉取。这好比嵌套函数返回到外部;(return)

5.小人不断拉取小圆圈的线,把袜子里面翻了出来。他通过获取的蓝色小圆圈,顺利的获取到了“a”;

ps:这里想表达的意思是:小人是全局环境,袜子是一个函数,蓝色圈圈是袜子函数里面嵌套的函数,a是嵌套函数中的变量。


产生一个闭包:

创建闭包最常见方式,就是在一个函数内部创建另一个函数

function func(){
  var a = 1,b = 2;
  function closure(){
    return a+b;
  }
  return closure;
}

上面例子中的 函数closure() 就是一个闭包。

闭包的作用域链:包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。

(作用域链这块儿前面变量那里讲的很清楚了,不再赘述)


以下,我会再扩展开,过几天发出来:

闭包的注意事项。

闭包的应用。

常见错误,在循环中创建闭包。

闭包的面试题。


目录
相关文章
|
JSON 前端开发 网络协议
前端知识点-----跨域
前端知识点-----跨域
316 0
|
3月前
|
存储 编解码 监控
针对3-15分钟视频的抽帧策略:让Qwen2.5 VL 32B理解视频内容
针对3-15分钟视频,提出高效抽帧策略:通过每5-10秒定间隔或关键帧检测方法,提取30-100帧关键图像,结合时间均匀采样与运动变化捕捉,降低冗余,提升Qwen2.5 VL 32B对视频内容的理解效率与准确性。
|
3月前
|
传感器 开发工具 开发者
最全DIY嵌入式智能手表 | STM32可编程多功能手表 [开源分享]
随着技术的不断进步和用户需求的不断变化,这款STM32可编程多功能手表有着广阔的发展潜力。未来,我们可以加入更多的传感器模块,如心率传感器、温湿度传感器等,进一步扩展手表的功能,提升其在健康监测、运动跟踪等领域的应用。同时,通过开源平台的支持,开发者可以贡献自己的创意和代码,推动手表功能的持续创新与优化。
最全DIY嵌入式智能手表 | STM32可编程多功能手表 [开源分享]
|
6月前
|
人工智能 安全 Java
掌握 Spring 中的 WebClient
本文介绍了 Spring Boot 开发中 WebClient 的使用场景及优势。WebClient 是非阻塞响应式 Web 客户端,适合高并发、流式数据处理和微服务通信。它支持事件驱动架构、大文件传输、超时重试机制,并可与 OAuth2 集成实现安全通信。相比 RestTemplate,WebClient 提供更高效的资源利用和灵活的并发处理能力,适用于现代响应式应用开发。文中通过代码示例详细对比了两者的区别,展示了 WebClient 在异步编程中的强大功能。
806 0
|
10月前
|
机器学习/深度学习 人工智能
Diffusion-DPO:一种基于直接偏好优化的扩散模型对齐新方法
本文介绍了一种名为 Diffusion-DPO 的创新方法,该方法基于直接偏好优化(DPO)原理,简化了扩散模型与人类偏好的对齐过程。相比传统的基于人类反馈的强化学习(RLHF)方法,Diffusion-DPO 避免了显式奖励模型的训练,通过数学近似简化实现流程,并在处理开放词汇表场景时展现出更强的能力。实验结果表明,该方法在 Stable Diffusion 1.5 和 SDXL-1.0 等主流模型上显著提升了生成图像的质量和可控性,为未来扩散模型的发展提供了新的思路。
770 14
Diffusion-DPO:一种基于直接偏好优化的扩散模型对齐新方法
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
474 3
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
449 1
|
JavaScript 前端开发 API
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解
|
缓存 前端开发 JavaScript
彻底理解前端闭包
【8月更文挑战第7天】彻底理解前端闭包
251 1