写在前面:
闭包是被讲烂的内容,但是当我不了解的情况下,看过很多教程,听过很多道理,还是无法完全理解闭包这个东西。所以想要写一篇比较详细,前端小白也能够真正理解闭包概念的干货文章,本文参考很多闭包资料,希望能真正把闭包这个东西讲清楚,喜欢的朋友可以点个赞,或者点波关注。
首先需要了解一波js变量的作用域以及变量的生存周期。
前几天我发在掘金上面了,下面是一个内容概要,墙裂推荐所有小伙伴,还是点进去学习一波,作用域这个问题可以说是闭包最为重要的内容。
里面的内容包括:
1.变量的作用域(变量的有效范围)。
2.变量作用域,js高级程序设计(红宝书)中的解释。
3.红宝书中的作用域链栗子(还有一个例子的解析:画重点,这里关于作用域讲的比较详细,看完这个作用域就了解差不多)。
4.变量的生存周期。
这里是链接,点进去学习一波:js 变量的作用域详解、生存周期,以及一些小细节。
闭包的概念:不同解读一览。
以下节选了一些对闭包概念的不同理解,基本都没偏离本质,我进行一些解释和画重点操作,小伙伴们可以从中挑选一款相对于自己来说比较好理解的概念,自己意会。
维基百科
闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍然访问非本地变量
MDN上面这么说:
闭包是一种特殊的对象。闭包是由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
闭包概念 根据《javascript权威指南》里对闭包的解释:
所有的javascript函数都是闭包。而当一个嵌套函数被导出到它所定义的作用域外时,闭包会更有趣。
ps:我们通常意义上的闭包指的是在一个函数内部嵌套另一个函数,这里的概念很有趣。把所有函数都当成闭包,相当于把所有局部环境都当成了一个闭包,细细想想觉得蛮有道理的,这里就见仁见智了。
阮一峰的理解:
闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
javascript高级程序设计(红宝书)的解释):
闭包就是指有权访问另一个函数作用域中的变量的函数。
感觉这里比较简单且清晰,对此要解释一波,上面的意思是:
闭包是一个函数内部嵌套着另一个函数,而被嵌套的那个函数有权利访问嵌套它的那个函数的作用域中变量。
上面这里分点来读,慢慢读。
1.被嵌套的那个函数
2.有权利访问
3.嵌套它的那个函数
4.的作用域中
5.的变量。
这里有一张帮助你理解闭包概念的图片:
用图片来记忆,记忆效率还是高一点,而且是这么特别的一张图片,这么6的图片,出自一张图搞定闭包概念
号称一张图搞定闭包概念,哈哈,反正我单单看这张图片,我是猜不透想表达什么
图片解释:描述嵌套函数的闭包情况。
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() 就是一个闭包。
闭包的作用域链:包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。
(作用域链这块儿前面变量那里讲的很清楚了,不再赘述)
以下,我会再扩展开,过几天发出来:
闭包的注意事项。
闭包的应用。
常见错误,在循环中创建闭包。
闭包的面试题。