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

dengzy
  • 33

这是一个常见闭包问题:

请问各位大佬,这个代码是怎么执行的,
比如说 当点击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>

回复
阅读 1.4k
5 个回答
✓ 已被采纳

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

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

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

薛定谔的猫
  • 426
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依次调用
}

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

宣传栏