1. 首页

闭包概念不同解读,超详细哦

写在前面:

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

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

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

里面的内容包括:

1.变量的作用域(变量的有效范围)。
2.变量作用域,js高级程序设计(红宝书)中的解释。
3.红宝书中的作用域链栗子(还有一个例子的解析:画重点,这里关于作用域讲的比较详细,看完这个作用域就了解差不多)。
4.变量的生存周期。

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


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

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

维基百科

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

MDN上面这么说:

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

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

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

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

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

阮一峰的理解:

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

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

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

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

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

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

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

1.被嵌套的那个函数
2.有权利访问
3.嵌套它的那个函数
4.的作用域中
5.的变量。


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

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

闭包概念不同解读,超详细哦

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

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

1.打个比方:有一只袜子,它的内部就好比是一个链式作用域
ps:作用域链的定义以及解析,在上面变量部分的链接里面。

2.小人无法直接获得袜子内部的“a”。这里的“a”就好比链式作用域里的一个局部变量;
ps:蓝色圈圈里面的作用域形成了一个闭包,所以外面的无法访问a。

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

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

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

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


JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

产生一个闭包:

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


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

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

闭包的作用域链:包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。
(作用域链这块儿前面变量那里讲的很清楚了,不再赘述)


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

闭包的注意事项。
闭包的应用。
常见错误,在循环中创建闭包。
闭包的面试题。

后话:

想认真写明白一个东西真难,本文其实写到这里好几天了。最后那些没有扩展开的,希望能够写的详细点,然后就一直想着怎么写的更通俗一点。so,我先发这个出来,后面几个一个一个,慢慢解决。到时候,放链接链接起来。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:闭包概念不同解读,超详细哦

链接:https://www.javascriptc.com/2372.html

原文链接:

« 168行代码实现Vue极简双向绑定
送你一份浏览器重绘(repaint)重排(reflow)与优化»
Flutter 中文教程资源

相关推荐

QR code