JavaScript 之 let与var的区别（其[[scopes]]的直观对比与分析）

前言

  了解JS的小伙伴们大概都知道用let与var来声明变量是有区别的，let是有块级作用域的（即以for，if…等所带的{}为块级作用域），而var没有。那么接下来我就带大家用一段代码在Chrome的console中测试一下吧。
首先准备好一段代码用于测试：

closures = [];
for (var i = 0; i < 2; i++) {
  closures.push(function () {
    console.log(i);
  });
}

一、var的实验

先看看var在console中的表现：

  在console输入测试代码后，回车再查看closures，我们可以看到数组中存放着两个function。这里以第一个f的[[scopes]]的内容为例（scopes就是作用域），这里面存放着运行期上下文的集合。
  点开Global（也就是全局变量）我们可以找到通过var声明的变量i，此时经过for循环，i已经被赋值为2了。由于是全局变量i孑然一身，所以即使在第一个function中访问它的时候，也只能是 i=2 了，所造成的影响如下图所示：

  我们访问第一个function，结果也是打印2，这和经典面试题在循环里放setTimeout打印 i 其实差不多的。

那么怎么解决呢，我们接着看。

二、let的实验

我们再来看看let的表现

  通过实验可以观察到，在用let声明i每个function都会在scopes中生成一个属于自己的块级作用域Block，这样每个 i 就多重影分身似的，被单独存储下来了。这样再观察，问题就解决了，如下图所示：

总结

  使用let可以让变量拥有自己的块级作用域，这样就不会造成变量相互之间的污染。块级作用域对JS还是非常重要的，没有它以前的JS程序员还要用IIFE这种东西来解决问题，所以现在既然有了let，那么var我们就可以丢到一边了，如果可以const，那么优先用const，否则就是let。
  写的不周到的地方，还望各位不吝赐教，相互学习。