JS块级作用域在循环中差别的体现

在ES6出现之前，JavaScript一直是只有函数作用域，没有块级作用域的。ES6出现之后，增加了块级作用域。本文将以一个经典的循环与闭包结合的示例出发，尝试去解释块级作用域的差别。

先看下面的例子：

function createFunctionArray() {
    var m = 'this is outer function',
        arr = [];
    for(var i = 0; i < 5; i++){
        arr[i] = function () {
            console.log(m,i);
        }
    }
    return arr;
}
createFunctionArray()[0](); // 5
createFunctionArray()[1](); // 5
createFunctionArray()[2](); // 5
createFunctionArray()[3](); // 5
createFunctionArray()[4](); // 5

在函数createFunctionArray中，利用循环创造了一个数组，数组里面的每一项都是对一个函数的索引。但是输出结果并不是想象中的1，2，3，4，5，这是为什么呢？

首先我们要知道在for循环中声明的 i 变量和 m 、 arr[]变量都是 createFunctionArray函数作用域内的变量。function () { console.log(m,i); }函数在创建时，会创建[scope]属性，该属性指向函数外层的活动对象集合，这里就是createFunctionArray 和 全局对象。然后当函数执行时，会创建函数的执行环境，通过复制[scope]的内容，创建执行环境的作用域链，再把函数自身的活动对象推到作用域链最前端。函数执行时遇到的变量就通过作用域链依次向上查找。

这里的function () { console.log(m,i); }在执行时，其中的 m 和 i 变量不在函数自身的活动对象中，因此需要向上查找，而此时for循环已经结束，因此访问到的 i 变量值均是5。

function createFunctionArray() {
    let m = 'this is outer function',
        arr = [];
    for(let i = 0; i < 5; i++){
        arr[i] = function () {
            console.log(m,i);
        }
    }
    return arr;
}
createFunctionArray()[0](); // 0
createFunctionArray()[1](); // 1
createFunctionArray()[2](); // 2
createFunctionArray()[3](); // 3
createFunctionArray()[4](); // 4

在采用了ES6的方式声明变量之后，可以看到能够按照预期以次输出0、1、2、3、4，但是我们看到此时的function () { console.log(m,i); }在执行时访问 m 和 i 变量依旧是向外查找的，也就是说函数在执行时，它的作用域链是自身的活动对象->for循环的块级活动对象->createFunctionArray的活动对象->全局对象，其中for循环的块级活动对象、createFunctionArray的活动对象以及全局对象，这三个是外层活动对象，是在函数创建时就存在的，函数自身的活动对象是执行添加的。

为什么这时的 i 可以准确地依次输出呢？首先，let 声明的变量只在声明的{}内有效，所以function () { console.log(m,i); } 在创建时，每次都要声明一个 i 变量，也就是说这个 i 和上一次循环的 i 本质上是不同的变量，在内存中的地址是不同的，循环进行了几次，就创建了几个变量。而之前采用var声明的时候，由于 i 变量提升的关系，每次的循环只是对 i 重新赋值，没有重新声明。也就是说，采用 let 声明之后，每个function () { console.log(m,i); }执行时查找的 i 变量本质上是不同的变量。