medium 五万赞好文-《我永远不懂 JS 闭包》

正如《你不知道的 JavaScript》书中所言：javascript

闭包就好像从 JavaScript 中分离出来的一个充满神秘色彩的未开化世界，只有最勇敢的人才能到达那里！前端

在实际的开发工做中也确实如此，除了在面试的场景下，或其它几个少数特定的场景下（如“防抖节流”函数），咱意识到了 —— 这就是“闭包”！其它时候基本不用，或者是用了殊不知道。java

多么惋惜！！这么好的东西用了却不自知。web

本篇借助 medium 上的五万赞好文 I never understood JavaScript closures 带你一次吃透“闭包”！（吃不透找我，找耶稣也没用，我说的 QAQ）面试

看完本篇，你会惊奇的发现，居然连如下这段代码都存在着闭包？！浏览器

let a = 1
function b(){
    return a
}
console.log(b())
复制代码

“我永远不懂 JS 闭包，由于它无处不在......”markdown

执行上下文

认知“闭包”前，咱得了解一个重要的概念 —— “执行上下文”！闭包

执行上下文分为：app

全局执行上下文（Global execution context）：当 JS 文件加载进浏览器运行的时候，进入的就是全局执行上下文。全局变量都是在这个执行上下文中。代码在任何位置都能访问。
函数执行上下文（Functional execution context）：定义在具体某个方法中的上下文。只有在该方法和该方法中的内部方法中访问。

好比咱们在全局执行上下文中调用一个函数的时候，JS 解析的流程大概会是这样的：ide

JS 建立一个新的函数执行上下文（能够理解为一个临时的“执行上下文”），它有局部可访问的变量集；
该执行上下文将被放到【执行栈】里去执行（这里将【执行栈】视为一种跟踪程序执行位置的机制）；
当遇到 return 或 } 时,断定为执行结束。
该执行上下文在执行栈弹出；
被执行的函数会将返回值发送给调用它的执行上下文，这里就是发送给全局执行上下文;
函数执行上下文将被销毁，它的变量集将不能再被访问到，这也是为何它被称为临时的“执行上下文”的缘由；

关于执行栈的操做，可见下面的动图理解：

咱们再结合下面这段代码举例解析，来看看 JS 一步一步究竟是怎么作的：

1: let a = 3
2: function addTwo(x) {
3:   let ret = x + 2
4:   return ret
5: }
6: let b = addTwo(a)
7: console.log(b)
复制代码

第一行，在全局执行上下文声明了一个变量 a，赋值为 3；
第二行到第五行是函数执行上下文。是在全局执行上下文声明了一个 addTwo 的函数，函数内部的代码不作执行，只是存储着以供后面调用；
第六行，声明了一个变量 b，赋值 b 为 addTwo 函数执行的返回值；
在全局执行上下文找到 addTwo 函数进行执行，并传入参数 3 ；
此时，执行上下文会进行切换！建立一个临时的名为 addTwo 的函数执行上下文，推到执行栈当中；
到第三行，而后是怎样？建立一个变量 ret 吗？不对，实际上，是先建立一个变量 x 而后赋值为 3 ；
第三行，声明一个变量 ret ，而后赋值为 x + 2 的运算结果。
JS 会找加法的项 x 在哪？原来 x 在 addTwo 这个函数执行上下文就已经有了，它的值是 3 ，接着与 2 执行加法运算，而后赋给 ret。
而后来到了第四行，将 ret 进行 return 返回；
第4、第五行，addTwo 函数执行结束，临时的执行上下文被销毁；变量 x 和变量 ret 都会被清除；函数执行上下文将被在调用栈被推出，而后把函数返回给调用它的执行上下文，这里也就是全局执行上下文；
而后回到第 4 点，将函数返回值赋值给 b；
第七行，进行打印；

这里虽然是一段很是冗长的解释，且还并未涉及到“闭包”，可是倒是咱们必需要写在前面而且理解透彻的。

词法做用域

接着“执行上下文”，还有一个概念咱们须要理解，它就是 “词法做用域”！

来看下面这段代码示例：

1: let val1 = 2
2: function multiplyThis(n) {
3:   let ret = n * val1
4:   return ret
5: }
6: let multiplied = multiplyThis(6)
7: console.log('example of scope:', multiplied)
复制代码

你能参照上一节的解释对这段代码进行描述吗？

第一行，在全局执行上下文声明了一个变量 vall，赋值为 2；
第二行至第五行声明一个 multiplyThis 函数执行上下文，内部代码不作执行，存储以供调用；
第六行，声明一个变量 multiplied，赋值为 multiplyThis 函数执行的返回值；
在全局执行上下文找到 multiplyThis 函数进行执行，并传入参数 6 ；
此时，执行上下文会进行切换！建立一个临时的名为 multiplyThis 的函数执行上下文，推到执行栈当中；
到第三行，在函数执行上下文声明一个变量 n ,并赋值为 6；
第三行，声明一个变量 ret ，而后赋值为 n 与 vall 作乘法的运算结果。n 为 6，vall 呢？在当前函数执行上下文并未找到 vall！
此时，JS 会去调用 multiplyThis 函数的全局执行上下文寻找 vall！找到了!它的值是 2，6 * 2 = 12。赋给 ret；
而后来到了第四行，将 ret 进行 return 返回；
第4、第五行，multiplyThis 函数执行结束，临时的执行上下文被销毁，变量 n 和变量 ret 都会被清除，可是 vall 没有被销毁，由于它存在于全局函数执行上下文；
回到第六行，将返回值 12 赋给变量 multiplied；
最后打印输出；

这段描述中，置灰的步骤就是和上一节的描述基本一致，未置灰的是

最重要的是：JS 在当前执行上下文寻找变量的时候，若是找不到，就会去调用这个执行上下文的上一执行上下文去寻找。

这并不难理解，这样链式查找变量的过程，就是 JS 的【做用域链】。

函数返回函数

函数能够返回任何东西，固然也就包括返回另外一个函数了。

让咱们再按照以上解析一遍如下代码：

1: let val = 7
 2: function createAdder() {
 3:   function addNumbers(a, b) {
 4:     let ret = a + b
 5:     return ret
 6:   }
 7:   return addNumbers
 8: }
 9: let adder = createAdder()
10: let sum = adder(val, 8)
11: console.log('example of function returning a function: ', sum)
复制代码

第一行，在全局执行上下文声明了一个变量 val，赋值为 7；
第二行至第八行声明一个 createAdder 函数执行上下文，内部代码不作执行，存储以供调用；
第十一行，声明一个变量 adder，赋值为 createAdder 函数执行的返回值；
在全局执行上下文找到 createAdder 函数进行执行，它在第二行，ok，调用；
来到第二行，建立一个新的临时的函数执行上下文，将其推倒执行栈；
因为 createAdder 函数没有传参，直接进入函数体内，这里声明了一个函数 addNumbers，只作声明，不作执行；
来到第七行，将 addNumbers 返回到全局执行上下文，它是一个函数；而后将临时 createAdder 函数执行的上下文推出执行栈；
createAdder 函数执行上下文被销毁，此时 addNumbers 也将不存在；
再到第十行，在全局执行上下文声明一个变量 sum，它的值为 adder(val, 8) 执行的返回值；
咱们再到全局执行上下文寻找 adder ，找到了，它正好是一个函数，咱们能够调用它；
他有两个传参，第一个是 val，它在第一行声明了并复制了，为 7，第二个参数是 8；
而后咱们来到第三行到第五行，建立两个变量 a 和 b ，为他们赋值分别为 8 和 7；
第四行，声明一个变量 ret ，赋值为 8 + 7，为 15；
ret 变量被 return ，临时的函数执行上下文被销毁，a ，b ，ret 变量都将被销毁；
adder 函数执行的返回值赋给 sum 变量；
最后打印输出；

主角闭包！！！

看了以上三段的具体步骤详细分析，我相信再给你一段相似的调用代码，你也必定能通晓其中端倪，做出相似的解析！

1：let counter
 2: function createCounter() {
 3:   let counter = 0
 4:   const myFunction = function() {
 5:     counter = counter + 1
 6:     return counter
 7:   }
 8:   return myFunction
 9: }
 10: const increment = createCounter()
11: const c1 = increment()
12: const c2 = increment()
13: const c3 = increment()
14: console.log('example increment', c1, c2, c3)
复制代码

来试试吧？

第一行，声明一个变量 counter ，赋值为 undefined ；
第二行至第九行，在全局执行上下文声明了一个函数 createCounter ，不作执行，存储以供调用；
第十行，在全局执行上下文声明了一个变量 increment ，赋值为 createCounter 函数执行的返回值；
调用 createCounter 函数，它在第 2 步已经声明了，执行它！
第二到九行，建立一个新的临时的函数执行上下文；
在这个临时的函数执行上下文声明一个变量 counter，赋值为 0；
第四到七行，声明一个 myFunction 函数，不作执行，存储以供调用；
将 myFunction 进行返回，赋给变量 increment。createCounter 函数执行上下文被销毁，myFunction 和 counter 都将被销毁；
此时的全局执行上下文没有 myFunction 函数了，只有 increment 函数；
第十一行，声明一个变量 c1 , 赋值为 increment 函数执行的返回值；
increment 函数是 createCounter 函数执行的返回值，它在第四行到第七行被定义；
建立一个新的函数执行上下文，没有传参，直接进入函数内部进行执行；
第五行，counter = counter + 1，counter 变量在新建立的函数执行上下文找的到吗？找不到！只得回到调用它的全局执行上下文去寻找，在全局执行上下文 counter 为 undefined，因此执行 counter = undefined + 1；
第六行，返回 counter，值为 1，销毁新函数执行上席文；
回到第十一行，c1 赋值为 1；
第十二行，重复步骤第 10 到第 14 步，c2 同理赋值为 1；
第十三行，重复步骤第 10 到第 14 步，c3 同理赋值为 1；
最终打印输出；

到底是这样的吗？ 咱们在控制台打印：

结果居然与咱们分析的指望打印相悖！

发生了什么？

必定还有一个神秘的东西在做用！没错，它就是 “闭包”！the missing piece ！

它的原理是这样的：

当咱们声明一个函数时，存储以供调用，存储的不只仅是这个函数的定义，同时还有这个函数的“闭包”，闭包包括了这个函数执行上下文全部变量的词法做用域。这些在函数被建立时就已经肯定下来了。

作个不太恰当的比喻，把函数理解为一我的，当这人生下来的时候（函数建立时），也附赠了一个背包（闭包），这个背包包括了家庭环境（词法做用域）。

因此咱们上一段的逐步分析是错的！

咱们再来进行一次正确的分析！

1：let counter
 2: function createCounter() {
 3:   let counter = 0
 4:   const myFunction = function() {
 5:     counter = counter + 1
 6:     return counter
 7:   }
 8:   return myFunction
 9: }
 10: const increment = createCounter()
11: const c1 = increment()
12: const c2 = increment()
13: const c3 = increment()
14: console.log('example increment', c1, c2, c3)
复制代码

第一行，声明一个变量 counter ，赋值为 undefined ；（同上）
第二行至第九行，在全局执行上下文声明了一个函数 createCounter ，不作执行，存储以供调用；（同上）
第十行，在全局执行上下文声明了一个变量 increment ，赋值为 createCounter 函数执行的返回值；（同上）
调用 createCounter 函数，它在第 2 步已经声明了，执行它！（同上）
第二到九行，建立一个新的临时的函数执行上下文；（同上）
在这个临时的函数执行上下文声明一个变量 counter，赋值为 0；（同上）
第四到七行，声明一个 myFunction 函数，同时还会建立一个闭包，包括这个函数执行上下文全部变量的词法做用域。此例中就是 counter，经过做用域链查找，它的值为 0。这里一样不作执行，存储以供调用；
将 myFunction 和它的闭包 一块儿进行返回，赋值给变量 increment。createCounter 函数执行上下文被销毁，myFunction 和 counter 都将被销毁；
此时的全局执行上下文没有 myFunction 函数了，只有 increment 函数；（同上）
第十一行，声明一个变量 c1 , 赋值为 increment 函数执行的返回值；（同上）
increment 函数是 createCounter 函数执行的返回值，它在第四行到第七行被定义；（同上）
建立一个新的函数执行上下文，没有传参，直接进入函数内部进行执行；（同上）
第五行，counter = counter + 1，counter 变量在新建立的函数执行上下文找的到吗？找不到！咱们要去它的“闭包”里面找一找！，居然是有的！它的值为 0 ，那么就能够执行 counter = 0 + 1，等于 1；
第六行，返回 counter，值为 1，销毁新函数执行上席文；（同上）
回到第十一行，c1 赋值为 1；（同上）
第十二行，重复步骤第 10 到第 14 步，咱们再去“闭包”里找的时候，由于通过上一步的操做 counter 已经变为 1 了，因此再执行加法运算，counter 结果为 2 ；
第十三行，重复步骤第 10 到第 14 步，c3 同理赋值为 3；
最终打印输出；

噢~原来是这样！

当一个函数声明的时候不仅仅只作了声明，后面还带着个“闭包”呢！闭包里装的是这个函数执行上下文全部变量的词法做用域！

原来这就是闭包！

你可能会疑问：只要一个函数进行了声明，就包含了闭包，那全局函数是否是也有闭包呢？

答案是：YES !

全局函数声明时，也有闭包！只不过它的变量词法做用域就是全局的，因此不是“闭”的不是很明显。

当一个函数返回另一个函数时，“闭包”是最明显的！返回的函数的变量词法做用域能够访问非全局范围的变量，它们仅放在其闭包中！

测验

这里再放几道闭包题目，供你们自查测验：

// 题目一
let c = 4
function addX(x) {
  return function(n) {
     return n + x
  }
}
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d)


// 题目二

function multiply(number1, number2) {
  if (number2 !== undefined) {
    return number1 * number2;
  }
  return function doMultiply(number2) {
    return number1 * number2;
  };
}

multiply(4, 5); 
const double = multiply(2);
double(5);

// 题目三

function showBiBao() {
    for (var i = 0; i < 5; i++) {
      setTimeout( timer => () {
          console.log(i);
      }, 1000 );
    }
    console.log(i)
}

showBiBao()

function showListNumber() {
    for(var i = 0; i < 5; i++) {
        let ret = function(i) {
            setTimeout(function timerr() {
                console.log(i)
            }, 1000)
        }
        ret(i)
    }
    console.log(i)
}
showListNumber()
复制代码

我相信若是你从头到尾认真跟着分析步骤来了，这必定不算啥大问题~

欢迎讨论 ~

总结

经过本篇咱们知道了：只要有函数申明的地方就有闭包！只不过有时候“闭”的不那么明显。

为何题目说《我永远不懂 JS 闭包》呢？其实你也看到了，开发工做中，即便你没有用到闭包或者根本不认识闭包也同样摸鱼打卡上下班。但问题的关键是闭包吗？

不！

你觉得本篇是在讲闭包？错！本篇是在讲执行上下文！

你觉得本篇是在讲执行上下文？错！本篇是在讲词法做用域！

你觉得本篇是在讲词法做用域？错！本篇是在讲 JS 的动态语言特性！

你一问本篇是在讲 JS 的动态语言？错！本篇是在讲 JS 运行的单线程特性！

......

没错，哎，就是玩儿~

撰文不易✍，点赞鼓励👍，你的反馈💬，个人动力🚀

我是掘金安东尼，关注公众号【掘金安东尼】，关注前端技术，也关注生活，持续输出ing！