js闭包问题：有大佬能解释一下这个代码是怎么执行的吗？

Question

这是一个常见闭包问题：

请问各位大佬，这个代码是怎么执行的，
比如说 当点击3的时候，是怎么执行打印出2来的？

---

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script>

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for (var i = 0; i < 5; i++) {
    console.log(i);
    (function (w) {
        elem[w].onclick = function () {
            console.log(w);
        };
    })(i);
}

</script>

Answer 1

for循环里面的自执行函数的实参来自i,在你点击的时候,实参i传递给形参w,点击第三个元素的时候,i=2,w=i=2,console.log(2)

Answer 2

你的div内容是从1开始的，而循环的索引是从0开始的，所以弹出来的值会比页面显示的对应值小1

Answer 3

你div是从1开始，1-5
i是从0开始，0-4
那么你点击div 3的时候，就是第三位，而i的第三位是2，因为0是i的第一位，1是i的第二位，2是i的第三位

Answer 4

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for (var i = 0; i < 5; i++) {
    console.log(i);
    (function (w) {
        elem[w].onclick = function () {    # 下标为i的div绑定一个函数，函数内容为打印当前下标
            console.log(w);
        };
    })(i);    # 从0-4依次调用
}

Answer 5

「立即执行函数」保留了每个「i」的数值，而且对每个「div」都进行了单独的事件绑定，
所以点击「div3」的时候，会输出「2」
（从0开始，所以是2）