在lesson3中咱们重温了JS作用域无关的内容，了解了JS作用域再来看闭包就十分easy了。

1.闭包的概念

先来补充一个知识点（PS:如果你感觉不好了解，就看之后代码吧~），词法作用域:“函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。为了实现词法作用域，JS函数对象的外部状态不仅蕴含函数的代码逻辑，还必须援用以后的作用域链。函数对象能够通过作用域链互相关联起来，函数体外部的变量能够保留在函数作用域内，这种个性被称为闭包”（《JavaScript权威指南》）

2.闭包的作用

闭包容许函数拜访并操作函数内部的变量。只有变量或者函数存在于申明函数时的作用域内，闭包就能够使函数可能拜访这些变量或函数。看一段非常简单的代码：

var  outerValue = 'New_Name';function outerFunc() {  console.log(outerValue);  //New_Name}outerFunc();

咱们在同一作用域内（本例是全局作用域）申明了变量outerValue和函数outerFunc，而后执行outerFunc。它能够“看见”和拜访outerValue。你可能写过很多相似的代码片段，但你或者素来没有意识到你正在创立一个闭包。

咱们再来看一个大家都相熟的例子吧：

var outerValue = 'New_Name';var laterFun;function outerFun() {  var innerValue = '重温新知';  function innerFun(){    console.log(outerValue);    console.log(innerValue);  }  laterFun = innerFun;}outerFun();laterFun();//New_Name//重温新知

上述代码中的语句：laterFun = innerFun; 的作用是将外部函数innerFun的援用存储在变量laterFun上，因为laterFun在全局作用域内，所以能够对其进行调用。语句：laterFun();的作用是调用外部函数，咱们不能在全局作用域间接调用innerFun，因为它是在outerFun的函数作用域内。

所以咱们看到了闭包使得咱们能够在外部函数的作用域隐没之后还能够执行外部函数。<u>这是因为当在内部函数中申明外部函数时，岂但定义了外部函数的申明，而且还创立了一个闭包。此闭包不仅蕴含了外部函数的申明，而且还蕴含了在申明外部函数时该作用域中的所有变量</u>。当最终执行外部函数时，只管申明的作用域曾经没了，然而通过闭包，依然可能拜访到原始作用域。这是不是很像外部函数将变量“包裹”起来呢？所以谓之闭包。

再来看一个其余模式的闭包的例子：

let outerFun;//未定义的全局函数{  let blockValue = 'New_Name';//块作用域变量  outerFun = function () {    console.log(blockValue)//New_Name  }}outerFun();

outerFun在块内被赋值，该块（以及它的父级作用域，即全局作用域）形成了一个闭包。无论到哪里调用outerFun,它都有权限拜访闭包内的变量。咱们要留神，只管调用outerFun时，程序曾经退出了blockValue的作用域，然而仍有有权限拜访它。个别状况下，某个作用域退出后，该作用域内的变量就会沦亡。而对于此例中的闭包，JS会检测到函数outerFun被定义在指定块作用域内，并且这个函数outerFun能够在该块作用域外被援用，所以outerFun被容许持有该块作用域的拜访权限。也就是闭包内的函数outerFun影响了闭包的生命周期。

3.闭包与循环

许多人在讲闭包的时候都和循环一起讲，咱们也来看看吧~

for(var i=1; i<=5;i++) {  console.log(i);}//1 2 3 4 5

这段代码齐全没问题，一次输入1-5。然而加点料可就齐全不一样了啊：

for(var i=1; i<=5;i++) {  setTimeout(()=>{    console.log(i);  },i*100) }//6 6 6 6 6

咱们原本想在控制台中看到这样的状况：以100ms的距离别离打印出1~5。但理论却是这样的状况：以100ms为距离别离打印出 6，6，6，6，6。为啥时这样的，6是从哪里跑进去的？循环的终止条件是i不满足小于等于5。首次成立时i的值为6，因而输入显示的时循环完结时i的最终值。

其实认真看看，这也是合乎预期的。setTimeout的回调函数是在循环完结后才执行的，因而每一次都会输入一个6。那是什么起因导致这段代码的行为和语义所暗示的不一样呢？

起因是咱们想在循环的每次迭代中获取一个i的正本。然而依据作用域的工作原理，只管循环中的五个函数是在各个迭代中别离定义的，然而它们都在一个共享的全局作用中（或者说它们关闭在一个作用域中），因而实际上只有一个i。如何解决呢？就是引进更多的闭包作用域。（节选自《你不晓得的JavaScript（上卷）》）IIFE会通过申明并立刻执行一个函数来创立作用域。先看一下上面的代码：

 for(var i=1;i<=5;i++) {  (function() {    setTimeout(()=>{      console.log(i);    },i*100)  })();}// 6 6 6 6 6

这段代码运行的后果还是每隔100ms输入一个6，后果也是不合乎预期的。这是因为尽管每个setTimeout函数都会将IIFE在每次迭代中创立的作用域关闭起来。然而作用域中是空的，没有本质内容，所援用的i还是那个公共的i。那么咱们给它加点料：

for(var i=1;i<=5;i++) {  (function() {    var j = i;    setTimeout(()=>{      console.log(j);    },j*100)  })();}// 1 2 3 4 5

在IIFE当中，咱们定义了局部变量j来存储i的值，这样使得每一setTimeout函数都有属于本人的j,并将其关闭放弃对变量j的拜访权限。上面的代码应用参数的形式对其进行改良：

for(var i=1;i<=5;i++) {  (function(j) {    setTimeout(()=>{      console.log(j);    },j*100)  })(i);}// 1 2 3 4 5

原理同上，在迭代内应用IIFE会为每个迭代都生成一个新的作用域，使得提早函数的回调能够将新的作用域关闭在每个迭代外部，每个迭代都会含有一个具备正确值的变量供咱们拜访。

说了这么多，闭包在理论开发中有啥应用场景啊？

4.闭包的应用场景

咱们说说闭包的两个常见应用场景：(1)封装公有变量(2)回调函数 。先看一下封装公有变量的例子：

function People() {  var age = 0;  this.getAge = function() {    return age;  }  this.grow = function() {    age ++;  }}var someone = new People();someone.grow();console.log(someone.age)//undefined 阐明咱们无奈间接获取该变量值console.log(someone.getAge());//1 通过getAge办法能够获取var anotherone = new People();console.log(anotherone.getAge());//0 anotherone领有本人的age属性

咱们创立了一个People结构器，在结构器外部定义了age。因为JS作用域规定的限度，咱们只能在结构器外部拜访该变量。为了让作用域外的代码可能拜访age，咱们定义了拜访该变量的getAge办法。

回调函数是另外一种常见的应用闭包的情景，在回调函数中咱们可能要频繁地拜访内部数据，所以咱们能够创立具备内部数据拜访权限的闭包。对于回调函数和咱们下面介绍的setTimeout的实质原理差不多，这里就不作过多的介绍了。

以上就是咱们要理解的有敞开包的一些次要内容，你会了吗？反正我是会了~~ ,咱们一起做点测试题吧

5.测试题

猜猜如下代码的运行后果：

var outerValue = 'outer';var laterFun;function outerFun() {  var innerValue='inner';  function innerFun(param){    console.log(outerValue);    console.log(innerValue);    console.log(param);    console.log(amazing);  }  laterFun = innerFun;}var amazing = 'New_Name';outerFun();laterFun("so fun");

后果是：控制台顺次输入outer，inner， so fun，New_Name 。这里值得一提的是（1）咱们向innerFun增加了一个参数，这个参数也在闭包内。（2）另外是变量amazing尽管呈现在函数的申明之后，然而也蕴含在闭包内。总之就是外围作用域中的所有变量都蕴含在闭包中。

好的，明天咱们的重温JS就到这里了，咱们下次将一起重温无关函数的常识~

如有谬误，请不吝指正。温故而知新，欢送和我一起重温旧常识，攀登新台阶~

参考资料：

[1]《你不晓得的JavaScript（上卷）》

[2] 《JavaScript忍者秘籍 第二版》

[3] 《JavaScript权威指南 第6版》

[4]《JavaScript编程精粹》

[5]《JavaScript学习指南 第3版》