理解闭包，理解let

js有两种作用域：全局作用域和函数作用域。函数内部可以直接读取全局变量，但是函数外部无法读取内部声明变量。

为了解决这个问题，想到一个办法，就是在函数内部，再定义一个函数。

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

这就是 JavaScript 语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
闭包就是函数f2。可以把闭包简单理解成“定义在一个函数内部的函数”。使用闭包主要是为了设计私有的方法和变量。
闭包最大的特点，就是它可以“记住”诞生的环境，比如f2记住了它诞生的环境f1，所以从f2可以得到f1的内部变量。

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

上述代码中，内部的闭包函数会记住上次start的值，每一次调用都是在上次的基础上计算。
原因就在于inc始终在内存中，而inc的存在依赖于createIncrementor，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。

闭包的用处：

• 可以读取函数内部的变量
• 让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
• 是封装对象的私有属性和私有方法。

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

上面代码中，函数Person的内部变量_age，通过闭包getAge和setAge，变成了返回对象p1的私有变量。

闭包的特性：

• 函数内再嵌套函数
• 内部函数可以引用外层的参数和变量
• 参数和变量不会被垃圾回收机制回收

好处：能够实现封装和缓存等；
坏处：就是消耗内存、不正当使用会造成内存溢出的问题

使用闭包的注意点

外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
解决方法是在退出函数之前，将不使用的局部变量全部删除。

面经中的问题：

• 为什么函数f1()已经弹出调用栈了，函数 f2()还能引用到函数 f1()中的变量。因为函数 f1() 中的变量这时候是存储在堆上的。现在的 JS引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。
• 循环中使用闭包解决问题(var)

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

因为 setTimeout 是个异步函数，所以会先把循环全部执行完毕，这时候 i 就是 6 了。

对于所有由setTimeout的操作，都将放在同一个队列中依次执行。
而这个队列执行的时间，需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后，才会开始执行由setTimeout定义的操作。所以这个定时是相对最后其他操作完才开始的。
我们创造闭包条件，每一次执行setTimeout中的取值是从上一个闭包来的。

解决一：闭包

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

父函数的i，每调用一次闭包保存一次。

解决二：setTimeout第三个参数

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

利用第三个参数，将setTimeout创造一个父函数父函数的i，每调用一次闭包保存一次。

解决三：let

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

对于 let 来说，他会创建一个块级作用域。

思考var和let

当var声明i时，相当于在块的外面，也就是全局声明：

var i;
for(i=1;i<=5;i++){}

在setTimeout访问全局作用域时，i已经变成5了。
打断点可见：
i在global中

当按下一步时i=1，再按下一步，直接跳6，再执行里面的函数：

而let相当于和解决一解决二一样，为闭包外提供了一个块级作用域，不用直接去访问全局。每一次的i都是新的i，但由于js引擎会记住上一次的i，则这次是由上次继续计算。
再一个理解：因为每次i都是新的，这一轮也是新的一轮，代表着在一轮里，setTimeout要等的就是i，当i新换出来后，就可以马上按照时间执行setTimeout，而不必像var一样要等全部i循环完（在全局作用域）。

   let i=1;
   setTimeout(function timer() {
                console.log(1);
            }, 1 * 1000);
   let i=2;
   setTimeout(function timer() {
                console.log(2);
            }, 2 * 1000);
   ……

打断点可看见：


每一次block中的i都不同

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc