从setTimeout来看javascript的作用域

首先我们来看这样一段代码：

 for (var i=0; i<3; i++) {
     setTimeout(() => {
         console.log(i)
     }, 0)
 }

很多刷过面试题的jser看到这段代码应该很熟悉了，脱口就能说出正确答案是 3 个 3，但有不少人却不明白其中的原理。别小看这段代码，其中暗含了不少的js的基础知识。
从代码层面来，很多童鞋会想当然的将上述代码理解成以下的内容：

    for (var i=0; i<3; i++) {
        console.log(i)
    }

即，输出为0、1、2。

如果这样想的话，他们至少犯了2个错误：

1. 写出第一段代码的童鞋，都是试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i 。
2. setTimeout等延迟函数的回调会在循环结束时才会执行，故而不管循环多少次，延迟多少时间，console.log中的i，必然是共享的全局作用域中变量i，在此例中就是3。

从第一段代码的执行顺序来看，其演示代码应该是:

var i=0;
i++;
i++;
i++;
console.log(i);
console.log(i);
console.log(i);

上述代码就很好地解释了第一段代码3个3的执行结果了。

～～ 那怎样才能使上述代码的输出为0、1、2呢？

提供两种方法：

1. 使用let

    for (let i=0; i<3; i++) {
        setTimeout(() => {
            console.log(i)
        }, 0)
    }

let 本质上这是将一段代码块转换成一个可以被关闭的作用域。或许这样看会比较直观。

    for (var i=0; i<5; i++) {
        let j = i
        setTimeout(() => {
            console.log(j)
        }, 0)
    }

let的存在，会产生一个隐形的作用域，使得每次循环的 i 值通过复制给隐形作用域内的 j 保存下来。

2. 使用function创建独立作用域

    for (var i=0; i<3; i++) {
        (function(j) {
            setTimeout(() => {
                console.log(j)
            }, 0)
        })(i)
    }

众所周知，js 中 function 可以提供一段独立的作用域，那我们就可以通过在迭代内使用function会为每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问。