Js for循环配合onmouseover事件 JavaScript 开发进阶：理解 JavaScript 作用域和作用域链JavaScript作用域链

先看下面程序：

 1 var iconA = document.getElementsByClassName('iconA');
 2 var iconB = document.getElementsByClassName("iconB");
 3 
 4 for(var i=0;i<iconA.length;i++){
 5     iconA[i].onmouseover = function(){
 6         alert(i); //i值总是等于数组长度值iconA.length
 7         iconB[i].style.display = 'block';
 8     }
 9 }
10 
11 for(var i=0;i<iconA.length;i++){
12     !function(i){
13         iconA[i].onmouseover = function(){
14             alert(i); //i值依次为0、1、2...iconA.length-1
15             iconB[i].style.display = 'block';
16         }
17     }(i);
18 }

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

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

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

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

JavaScript作用域链