JS：for循环内的数组下标i每次都取到最大值的原因

最近几天心血来潮，想修改一下之前做的一些小东西，有个地方需要用到for循环，for循环里面有一个点击事件。类似于这样的：

for(var i = 0;i <= 3;i++)
{
    button[i].onclick = function(){
        console.log(i);
    }
}

我预想的应该是点击不同的button按钮，随之在控制台里打印出与数组下标相对应的i值，比如0、1、2、3。但是不管点击哪个button按钮，打印出的都是4。这让我想起来我刚刚开始学js的时候，也是碰到这个问题，不过当时我没想那么多，百度搜了搜用index方法解决了。也就是：

for(var i = 0;i <= 3;i++)
{
    button[i].index = i;
    button[i].onclick = function(){
        console.log(this.index);//这里输出的就是0、1、2、3
    }
}

但是过了这么久再看这个问题就不能把它放在一边了。于是我百度搜了搜，发现原因还蛮复杂，我就只把我现在能理解的东西写出来吧。

原因

关键在于这个var。js中var是全局作用域，它定义的变量在整个函数里都能使用。for循环里的每一次赋值都是给全局变量赋值。而且由于js的奇妙特性，循环并不会等待事件触发，而是先完成循环。因此打印出的就是i的最大值。

解决方法

有一个很简单的解决方法，就是把var换成let。我们来做个对比：

for(var i = 0;i < 4;i++)
    {
        console.log(i);//打印出0、1、2、3
        button[i].onclick=function(){
            console.log(i);//打印出4
        }
    }

for(let i = 0;i < 4;i++)
    {
        console.log(i);//打印出0、1、2、3
        button[i].onclick=function(){
            console.log(i);//打印出0、1、2、3
        }
    }

为什么let就不会出现var的那种情况呢？

• let是块级作用域，只能在代码块中起作用，也就是只在一个{}中起作用。它定义的变量也是如此。for循环每次循环都会产生一个新的代码块，每个代码块里面的i值是独立的，因此触发点击事件时打印出的i值就是对应数组下标的i值。
• 而var定义的i每次循环自增的时候都会替换之前所有for循环生成的代码块里面的i值，因此当循环结束后，无论点击哪个button按钮，打印出的都是i循环后的最大值，而不是相对应的数组下标。