块级作用域的疑问

Question

很普通的一个例子，但是关于let的块级作用域，有一些不明白
第一个这么写我可以理解：

    var i;
    for(i=0; i<10; i++){
        (function(i){
            var a = document.createElement("a");
            a.innerHTML = i + "<br>";
            a.addEventListener("click", function (e){
                e.preventDefault();
                alert(i);//这里的i不是for循环的i，这个是function自己的i,而for循环的i是全局的i。这里的i是随便取的名字，也可以叫num，都行;
            });
            document.body.appendChild(a);
        })(i);
    }

每次循环一下，就创建一个函数，而把全局的i的当前值赋给函数的参数(局部的)，防止全局污染，相当于创建了10个函数

换成let，可以简单的实现这个功能，但是我就搞不太懂为什么了，虽然不是全局变量了，但是感觉跟全局变量的意思是一样的：

for(let i=0; i<10; i++){    //用let，因为let有块级作用域，所以就可以了

        var a;
        a = document.createElement("a");
        a.innerHTML = i + "<br>";    
        a.addEventListener("click", function (e){
            e.preventDefault();
            alert(i);    
        });
        document.body.appendChild(a);
    }

i的作用域就是在for里,不再是全局的了, 找当时生成的时作用域，当时传进来的i是多少，这里i就是多少。感觉这样并不能说服我自己，为什么alert(i); i还保持了当时的值呢？for循环不是也早就执行完了吗，咋不是10？

Answer 1

这个因为这里的作用域是这里for循环的内部，所以其实这里click事件的父级作用域的上级是for循环，其中的i变量其实是在每次循环的重新let的i变量，而不是同一个i变量被重新赋值。

let i;
for(i=0; i<10; i++){
    var a;
    a = document.createElement("a");
    a.innerHTML = i + "<br>";    
    a.addEventListener("click", function (e){
        e.preventDefault();
        alert(i);    
    });
    document.body.appendChild(a);
}

你可以试一下上面这段代码，就可以看出这里的区别是在于let是在for循环内的变量。