javascript - for循环经典闭包问题的衍生题

问题描述

问 题

    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

var nodeList = document.getElementsByTagName('li');

for(var i = 0;i < nodeList.length;i++){        
    nodeList[i].onclick = function(){            
        console.log(i);
    }
}
这里每个li的onclick触发后 都会输出4 ,因为console.log(i)只是对i变量的引用

如果改成一下代码：
for(var i = 0;i < nodeList.length;i++){
    nodeList[i].num = i;
    nodeList[i].onclick = function(){            
        console.log(this.num);
    }
}

可以正常输出0,1,2,3  猜测原因是在为li创建onclick事件的同时创建属性num
所以num和onclick都是属于li的一部分，那么再变化一下代码

for(var i = 0;i < nodeList.length;i++){
    var num = i;
    nodeList[i].onclick = function(){            
        console.log(num);
    }
}

这里依然会输出4，如果说是因为引用了num，而num又引用了i 
那么，为什么以nodeList[i].num = i 的可行？ 
为li创建了属性num的同时 
nodeList[i].num = i 算是对i的引用还是赋值？

解决方案

你这样的学习方法真的太可怕啦!.

闭包会都输出4的原因是, 函数定义时并不执行.

var nodeList = document.getElementsByTagName('li');

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

之所以输出的全部是3, 是因为li绑定的事件处理函数在定义时并未执行, 当你触发li的点击事件时函数执行, 此时的i是3,当然会输出3.

for(var i = 0;i < nodeList.length;i++){
    nodeList[i].num = i;
    nodeList[i].onclick = function(){            
        console.log(this.num);
    }
}

为li增加一个属性, 为num属性赋值是在什么时候发生的? 他并没有放到函数里, 所以这个语句直接就执行啦. 此时i就分别为0,1,2,3, 等事件处理函数执行的时候, 输出的是对应li的num值, 而这个时候的num已经在上一步就为其赋值啦. 当然会输出0,1,2,3

for(var i = 0;i < nodeList.length;i++){
    var num = i;
    nodeList[i].onclick = function(){            
        console.log(num);
    }
}

这个是因为, num变量被覆盖了值.
假设代码改成这样:

var num;
for(var i = 0;i < nodeList.length;i++){
    if(i === 1) {
        num = i;
    }
    nodeList[i].onclick = function(){            
        console.log(num);
    }
}

你说他会输出什么?

我说的学习方法可怕, 是你不好好看书, 理解他的真义. 就这样钻这些牛角尖. 是会出事儿的.

这篇关于javascript - for循环经典闭包问题的衍生题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！