Js for循环配合onmouseover事件

先看下面程序：

var iconA = document.getElementsByClassName('iconA');
var iconB = document.getElementsByClassName("iconB");

for(var i=0;i<iconA.length;i++){
    iconA[i].onmouseover = function(){
        alert(i); //i值总是等于数组长度值iconA.length
        iconB[i].style.display = 'block';
    }
}

for(var i=0;i<iconA.length;i++){
    !function(i){
        iconA[i].onmouseover = function(){
            alert(i); //i值依次为0、1、2...iconA.length-1
            iconB[i].style.display = 'block';
        }
    }(i);
}

第一个for循环遍历每个元素后，在每个元素上触发onmouseover事件时总是alert出数组长度

第二个for循环遍历每个元素后，在每个元素上触发onmouseover事件时可以正常依次alert出想要的值

查阅网上查资料，理解这个问题需要明白 “作用域链” 的概念，参考文章如下：

JS中 for循环后 值i的问题

JavaScript 开发进阶：理解 JavaScript 作用域和作用域链

JavaScript作用域链