关于javascript:重温JavaScriptlesson4作用域和闭包2

在 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 版》