众所周知，闭包是js十分难的一个难点，但是我不认同，闭包其实很好了解，看完这篇文章，我相信你能够攻克这一难点。文章有点长，请咱们多花点耐性。
为了讲闭包，咱们还需求引入调用栈，以及效果域链这两个概念。
调用栈、效果域链
咱们先看一段代码
while(1){
console.log(123)
}
这个很好了解，输出会陷入死循环，永不中止。
咱们再来看一段代码
function foo(){
console.log('hello')
foo()
}
foo()
这个代码的意思便是咱们调用foo的时分会打印一个hello，而且之后再进行调用自己，再打印hello，再调用自己，一向下去。似乎也是陷入一个死循环，但是咱们现在来看下这儿的输出其实是跟上面有所不同。
hello
hello
.....//此处省掉
hello
RangeError: Maximum call stack size exceeded
这儿竟然还会报错，call stack 其实便是调用栈的意思，这段代码报错说的是调用栈爆栈了，空间缺乏！
为什么这儿用函数无限自己调用自己会产生空间缺乏？咱们带着这个疑问走进调用栈这个概念。
调用栈其实便是用来寄存履行上下文的一种数据结构而且他有一个很重要的特点，咱们必定要记住！：当一个履行上下文履行结束之后，他的履行上下文就会出栈
怎么了解他的特点呢？咱们还记得我之前写过一篇关于js预编译的文章吗，其时其实有讲过他的概念，而且我画了下面这张图，这张图里边有个指针其实并不完全对，这个咱们待会儿讲效果域链的时分再讲。
这个调用栈便是用来寄存履行上下文的，当一个履行上下文现已用完了之后咱们的js履行引擎是需求进行一个出栈的动作的。栈的空间是有限的，假如一向不进行出栈，那么这个栈就会被挤爆掉，所以上面那个例子的输出成果咱们能够了解了。while里边是输出句子，不会创建效果域或许说履行上下文，因而能够一向循环下去。这儿又提到效果域，不熟悉的小伙伴能够去看下我的童贞作和另一篇，讲的是效果域以及编译问题，这儿放下链接
[](针对小白的js效果域具体介绍 – (juejin.cn))
[](一道面试题带你全面认识js预编译底层逻辑 – (juejin.cn))
关于这个调用栈咱们又要进行绘图，这次我仍是以手绘的形式给咱们展现，尽量做到简洁明了。
咱们先以下面这个案例进行解说
var a = 2
function add(){
var b = 10
return a b
}
add()
这个代码会输出什么，很明显，咱们能够很快得出答案。成果便是12。这儿我给小白嘀咕两句，想要看出这个代码输出的时分，咱们能够直接仿制代码到浏览器随意一个页面上右键检查然后去到console控制台上面运转，假如运用VScode得话，想要看出运转成果，终究一行代码改成console.log(add())即可。
咱们现在带咱们深入底层逻辑聊聊这个代码的运转进程。
咱们假如清楚我前期聊过的预编译就清楚，这段代码咱们会先创建一个GO目标预编译，这个目标中的履行进程如下
GO{
a : undefined
function :add()
}
GO目标是大局履行上下文的一部分，你能够了解成便是大局履行上下文。当大局履行上下文准备好之后，它就会入栈，而且每个栈内都会有个outer指针，outer指针的初始值为null,这个指针指向的是该履行上下文的外层上下文，现在开端履行大局履行上下文
GO{
a : undefined -> 2
add()
outer: null
}
当履行到add()的时分，咱们的预编译就会开端编译add函数，所以创建一个AO目标（这儿看不懂的必定要看看我的js预编译那期，根底要打牢）
AO{
b: undefined
outer: null
}
当AO目标编译好后，或许说add函数履行上下文准备好后，add函数履行上下文会进行入栈，所以开端履行add函数履行上下文
AO{
b: undefined -> 10
return a 10
outer: null -> 大局履行上下文
}
这儿我弥补一下，顺带把效果域链解说清楚。outer为什么指向了大局履行上下文，outer这个东西其实便是构成了效果域链
效果域链：经过词法环境中的outer指针来确定某效果域的外层效果域，查找变量由内到外的这种链状关系。
提到词法环境，咱们或许仅仅知道它便是用来寄存let和const声明变量的值，其实这仅仅其间一个部分，它是由两个部分组成的，别的一个部分便是outer指针，官方话术为外部词法环境引用(Outer Lexical Environment Reference)
怎么确定add履行上下文的外层环境呢，咱们只需求看它在哪里声明即可，add函数声明在大局效果域中，所以它的外层效果域便是大局履行上下文（或大局效果域），所以它的outer指向了大局履行上下文。因而咱们AO中没有a，查找就朝着outer指向的方位大局中查找，这才找到了a的值，所以终究return 12。所以我说我上面的那个图其实是不完全对，或许了解还没愈加深入，它的指针并不是从上到下，而是看outer的指向，outer指向又依据你的声明方位。
下面给出作图协助了解
下面再给个例子协助咱们深化了解
var a = 2
function add(b,c) {
return b c
}
function addAll(b,c){
var d = 10
var result = add(b,c)
return a result d
}
addAll(3,6)
咱们能够先依据上面那个例子的剖析办法，自己来剖析一遍再来看我的剖析，看看终究是否共同。
大局履行上下文：a: undefined 、function: add()、function: addAll()准备好之后入调用栈而且开端履行：a -> 2 、addAll() 所以开端编译addAll()
addAll履行上下文：d: undefined 、result: undefined、b ->3 、c->6 准备好后入调用栈而且开端履行：d -> 10 、result = add(3,6)
add履行上下文：b->3、c->6 准备好后入调用栈而且开端履行，回来9
当9赋值给result的时分，咱们的add履行上下文就现已履行结束，当一个上下文履行结束后会进行毁掉，这便是一个处理栈满的机制。这也能够解说一向调用自己的函数的时分，它永久不会履行结束，因而一向不毁掉，再进行堆栈，所以会引发栈满，一般栈能够寄存上百个上下文，不用去忧虑栈满。所以addAll开端执终究的return，a result b 里边只要a是找不到的，所以顺着addAll中的outer指针找，咱们说了，指针的指向便是该函数的声明所在效果域，所以去大局找a，终究回来成果 2 9 10 = 21，所以addAll进行毁掉。
咱们应该都了解了上面的内容。好，现在给出一个例子看看咱们是否了解到位
function bar(){
console.log(myName)
}
function foo(){
var myName = '大黑子'
bar()
}
var myName = '小黑子'
foo()
咱们认为输出会是什么呢？千万不要自己想当然，这道题没你想的那么简单。相同的，先自己做一遍，再来看我的剖析与答案
大局履行上下文：myName: undefined 、 function：bar() 、 function: foo() 准备好后入栈开端履行：myName -> '小黑子' 以及foo() 所以开端编译foo()
foo履行上下文：myName: undefined准备好后入栈开端履行：myName -> '大黑子'、bar()，所以开端编译bar()
bar履行上下文：没有变量，直接履行，打印myName，这儿找不到myName所以开端求助词法环境中的outer指针，咱们说了，指针指向便是自己函数声明所在的效果域，bar函数声明在大局履行上下文中，所以打印小黑子，所以履行foo函数便是履行bar函数，终究答案为小黑子。
假如你答案是大黑子必定是直接看的外层效果域，实则否则，咱们要看的是outer指针。
终究给出一道题目，咱们来看看这儿会输出什么？
var arr = []
for(var i = 0; i <10; i ) {
arr[i] = function() {
console.log(i);
}
}
for(var j = 0; j < arr.length; j ){
arr[j]()
}
这个代码好像有点不友好，但是咱们仍是能够了解的。
这段代码意思便是给出一个数组，里边放10个函数，分别打印对应的i值。然后后面便是调用这个函数。按道理应该是打印0123456789。但是，咱们运转后发现成果为10个10！？？？
这是为什么？
其实var是元凶巨恶，假如咱们改成let，那么终究输出便是0123456789。这又是为什么，咱们来一同自行剖析下。
第一个for循环仅仅是给了10个函数声明，至于函数体咱们是先不论的，比及调用函数的时分咱们再来看或许说编译这个函数体，现在走到第二个for循环，函数名加一个括号便是函数的调用，因而这是在调用arr[0]、arr[1]到arr[9]这10个函数。咱们就来看第一个，arr[0]，里边只要一个履行句子，console.log(i)，i不在arr[0]这个函数体内，所以咱们要靠outer找到i,outer是指向大局的（由于arr[0]生声明在大局中），i现在等于多少呢，要点来了！当咱们要开端履行的函数的时分，就代表前面的句子现已走完了，也就说i这个值现已从0走到了9，终究9仍是小于10，i ，因而i终究的值为10！，所以咱们的arr[0]打印出的值是10，由于后面所以的函数都是指向大局的i，而且履行函数的时分，i现已都是10了，所以终究的运转成果便是10个10！
上面的解说太过于仔细了，咱们能够换个简略的说法，便是i这个值存在于大局中，比及履行函数的时分，i现已为10了，10个函数都是打印i，所以是10个10。
那为什么把var改成let了就能够正常输出0到9呢？
前面的文章我现已讲过，let能够和{}结合形成一个块级效果域，因而会形成10个块级效果域，每个块级效果域都有一个i，因而10个函数声明在这儿便是声明在对应的块级效果域中，也便是outer指向了对应的块级效果域，第一个函数找i时，去第一个块级效果域中找，里边的i是0，第二个函数找i时，去第二个块级效果域中找，里边的i是1，如此循环，便是0到9了。
好，现在了解了这个代码的输出原理，咱们便是希望能够输出0到9，这儿的let是个办法，还有什么办法呢？
第二个解法便是用闭包的思想，这道题先放在这儿，咱们待会儿讲完闭包后再来剖析这道题的解法
闭包
咱们经过下面这个例子协助咱们来认识下闭包
function foo(){
var myName = '小黑子'
let test1 = 1
let test2 = 2
var innerBar = {
getName: function(){
console.log(test1);
return myName
},
setName: function(newName){
myName= newName
}
}
return innerBar
}
var bar = foo()
bar.setName('大黑子')
bar.getName()
咱们来一同逐渐剖析下
大局履行上下文：function: foo() bar: undefined 准备好后入栈开端履行该上下文，bar -> foo()，所以开端编译foo
foo履行上下文：myName: undefined, test1: undefined , test2: undefined innerBar: undefined,这儿需求留意innerBar，innerBar是个目标，里边能够寄存各种数据类型，后面我还会出一片目标的文章专门聊聊目标。该履行上下文准备好后入栈开端履行，里边的赋值我就不多赘述了，终究会回来一个innerBar这个目标。
回来目标给bar后，正常来讲这个履行上下文是现已进行了自我毁掉。bar现在就成了innerBar这个目标，这个目标里边有两个key是函数，所以bar.setName便是调用这个函数，这个函数终究会回来一个myName，也便是大黑子，所以现在开端履行bar.getName，这个函数里边需求打印test1这个变量，和回来myName，这两个在函数体内都没有，所以查看outer，发现outer指向的是foo这个函数履行上下文，但问题来了，这个foo履行上下文在foo()赋值给bar时就现已进行了毁掉，所以打印成果时报错才对。但是这道题的运转成果竟然是
1
大黑子
这是为什么呢，本来咱们的js履行引擎在看到函数体内还有函数而且return的时分，在履行完外部函数的进行毁掉的瞬间会丢出一个包，这个包就用来寄存内部函数需求用到的变量，这儿便是test1和myName，里边的值分别为1和小黑子，丢出包也便是履行完foo，在此之后履行setName，这个时分setName指向的方位由本来的foo变为了foo丢下的闭包，所以寻觅myName更改其值为大黑子，终究履行getName，输出为终究正确成果。“
整个进程十分绕，这儿我仍是给出一个贴图协助咱们了解
function a(){
function b(){
var bbb = 234
console.log(aaa);
}
var aaa = 123
return b
}
var c = a()
c()
咱们这儿能够先自己思考下再来看我的剖析
这个题目其实现已很好了解了，大局中c需求被赋给a这个函数（a赋值完给c后毁掉），而a这个函数回来了b这个函数，因而c其实便是接收了b这个函数，所以说履行c这个函数等同于履行b这个函数，而b原本指向了a这个函数，此刻a毁掉后留下了带有b函数所需参数的闭包，所以b函数指向了这个闭包，其实因而调用c会正常打印出aaa的值123。
这儿我犯了一个很愚笨的过错，咱们乐意看就看，不乐意看跳过这一段。这个代码我运转的时分放在浏览器上发现多打印了个undefined，然后我再把这段代码放到node中运转，而且把终究一行代码改成了console.log(c())，发现也打印了个undefined，所以我就去问了下教师。这才得知放在node运转不需求再来个console.log，由于c()里边便是一个console.log，这就相当于console.log(console.log(123))，咱们能够看下这样运转会是什么
console.log(console.log(123))
输出：
123
undefined
undefined是由于里边的东西没有引号会被js履行引擎当成一个变量来履行，而这个变量并没有赋值，因而是undefined，但是我在浏览器控制台运转并没有console.log还会多出一个undefined，这本来是浏览器的一个默认行为，与代码是无关的。
好，现在咱们收回到for循环那个题目，咱们现在需求的是一个不改动var的情况下正常输出0到9这些数，已然要用闭包，咱们必定需求一个双层函数的结构，已然处理的是i没有赋值的问题，咱们能够把i丢到闭包中，然后让console.log(i)指向这个i,就能够了。因而咱们需求在第一个for循环中新增一个外层函数，让i赋值进去，咱们就需求一个形参来接收。
代码如下
for(var i = 0; i < 10; i ){
(function a(j){
arr[i] = function(){
console.log(j);
}
})(i)
}
for(var k = 0; k < arr.length; k ){
arr[k]()
}
初看或许有点难以了解，由于这儿用到了自履行函数。为了便利咱们了解，我先解说下自履行函数。其实很好了解，咱们声明一个foo函数是写成function foo(){}，调用这个函数的时分foo()即可，这个foo便是一个函数体，因而咱们完全能够把foo换成一个函数体，当然这儿需求再加个（）,所以这便是一个自履行函数
function foo(){
}
foo()
等同于
(function foo(){})()
这个for循环中的外层函数a()声明完后立即履行，而且还把i传了进去，至于里边的内层函数咱们先不论，由于里边并没有return，等履行句子，里边仅仅把一个函数体赋值给了arr[0]（i=0为例），这儿需求留意，当a()函数履行结束的时分（自履行函数），这个a的履行上下文会毁掉掉，a的履行上下文里边只要i这个参数，而且i = 0，在毁掉的时分它需求留一下里边的内层函数是否会用到自己的参数，发现内层函数确实需求，所以arr[0]里边的i便是指向了a[0]留下的闭包，如此循环，每个arr都有自己对应的a，而且a走后留下对应的闭包给到arr，因而终究履行10个arr内部函数的时分便是顺次打印0-9了。
其实这个题目还有别的一个种办法让它顺次输出0到9，用到了定时器，有点取巧，咱们这儿就不讲了。
总结
假如上面的内容你都一一看完而且能够了解到位，那么祝贺你，你现已学会了闭包。咱们能够经过上面的例子对闭包进行一个总结。
在js中，依据词法环境中的规则，内部函数总是能够拜访到外部函数中的变量。当内部函数被回来到外部函数之外时，即便外部函数履行结束被毁掉时，内部函数仍是能够引用到外部函数，而且此刻的外部函数的履行上下文改成了一个闭包。
别的弥补一点，一般闭包都是架构师用得多，这样做能够让变量私有化，当然咱们运用闭包不能乱用，闭包仍是寄存在调用栈中，乱用仍是会导致内存泄漏，所谓内存泄漏便是占用了栈空间
假如觉得本文对你有协助的话，能够给个免费的赞吗[doge] 还有能够给我的gitee链接codeSpace: 记载coding中的点点滴滴 (gitee.com)点一个免费的star吗[星星眼]
