JS 基础知识点及常考面试题（二）2 闭包

闭包（closure）

概念

闭包是函数(内层)和声明该函数的词法环境的组合
闭包外层返回内层总之内层在外层结束访问外层局部变量的现象
注：异步是异步闭包是闭包无关系
例：下异步非闭包，存在bug，在本文末与解释

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

闭包三要素 ：函数嵌套函数函数返回函数内层函数能访问外层局部变量
对于函数返回函数说法不准确，闭包其实是词法环境
即外部函数存在的意义是提供内部函数需求的所有局部变量和定义内部函数
该词法环境称之为闭包
JavaScript中的函数会形成闭包。闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
注：闭包只是一个词法环境，如上解释。
对闭包的合理利用指当内部函数在执行前被外部函数返回，即外部函数执行返回值是该词法环境的闭包（包括了所有局部变量和内层函数），在外部函数执行完毕仍然能访问该词法环境的局部变量的现象
在闭包中会一直引用变量（是引用而不是副本），直到其断开连接不再引用，在内存中的闭包就可以得到释放。

闭包理解和合理利用

内部函数在执行前被外部函数返回
内部函数和外部局部变量组成闭包，在外部函数执行完毕销毁，内部函数和变量组合词法环境被外部调用时还能够访问到外部函数的变量，
普通函数嵌套，当子函数内部使用自己的局部变量，则随作用域和函数执行过程，变量被正常销毁，js的垃圾回收机制。
但是当外部函数返回内层函数时，由闭包的存在，外部函数执行完毕，内部函数仍能访问该词法环境的外部函数的变量，该词法环境的变量仍然未被销毁。
可以多个内部函数共享一个词法环境
闭包词法环境的独立性共享词法环境的闭包，改变调用的变量，会改变闭包的词法环境，故而一个闭包中对变量的修改，不会影响另一个闭包中的变量。即共享变量的词法环境的闭包，创建多个实例，数据的维护具有独立性，互不影响。

理解

理解 1、闭包是内层函数和创建内层时所能访问的所有外层函数的局部变量所组成的词法环境
等价
未定论点：MDN文档闭包：JavaScript中的函数会形成闭包。闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
理解 ?每个函数和外层局部变量的词法环境组成闭包，当外层函数返回内层函数时，可以利用闭包的特性(词法环境，外部访问)实现不同的效果，如循环条件的var与定时器的冲突，闭包于实例中的数据维护的独立性等
理解 2、对闭包的利用是闭包（内层相关的词法环境）在外层函数执行完毕被销毁时，内层的实例词法环境仍然能访问到该词法环境的局部变量的现象。即该实例下的局部变量待机
理解 3、封装的外层函数内的闭包，共享相同局部变量的词法环境，可通过创建不同的实例，利用统一闭包，传递不同变量，形成不同词法环境，即不同实例下闭包算法互不影响，数据维护具有独立性。
理解4、在闭包中会一直引用变量（是引用而不是副本），直到其断开连接不再引用，在内存中的闭包就可以得到释放。
案例： MDN 闭包计数器

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

闭包的私有方法模块模式数据维护的独立性
以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。

About 词法作用域

构造函数

解决情境

一：循环中使用闭包解决 `var` 定义函数的问题

问题如下

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

需求： 每秒console当前循环的i
效果：间隔1秒打印6
原因：
1、定时器内部异步
2、对于循环 i 1 => 6 循环5次最终i结果为6
3、异步即循环完毕 6个定时器的异步其中定时器时间未进入异步，挂载的是每次循环的i
4、多个异步在循环完毕后同时进行，即基于的基准时间点是同一个，因此延迟时间1s,2s,3s,4s,5s显示的效果为间隔1s
解决：
一

for (var i = 1; i <= 5; i++) {
  ;(function(j) {
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
}

思路：

自执行函数传参当前i
闭包的定时器异步获取参数
因为异步，闭包的词法环境保留定时器取到真实的j
同时异步仍然是基于同一个时间点，即间隔1s打印1-5

二
使用 setTimeout 的第三个参数，这个参数会被当成 timer 函数的参数传入。

for (var i = 1; i <= 5; i++) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
}

三
ES6使用 let 定义 i 了来解决问题了，简洁

for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

四
对于数组对象的i，forEach,可以顺序打印数组的值，但是无间隔
LINK

var arr = [1, 2, 3]
arr.forEach(function(item, index, array) {
    setTimeout(function(){
        console.log(index)
    }, index)
})