这是闭包问题么，谁给我解答一下！

Question

<div class="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</div>

JS代码一：

var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function() {
        alert(i)
    })
} //每一个都是弹出5

JS代码二：

var lis = document.querySelectorAll("li");
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function() {
        alert(i)
    })
} //将var改成let后，就能正确弹出每一个li的索引了

JS代码三：

var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    (function(i){
        lis[i].addEventListener('click', function() {
            alert(i)
        })
    })(i)
} //写在自执行函数里，也能正确弹出每一个li的索引

谁给我讲讲这是为什么

Answer 1

这个题目主要考察js作用域的问题。代码一和代码二考察var和let的区别，可以自行百度下。代码三是一个立即执行函数，把循环变量当做参数传递进去，通过匿名方法修改了变量的作用域。