在下拉选项鼠标经过事件中接触了闭包

Posted 2020-07-26

在制作鼠标经过下拉导航的过程中遇到通过for循环来遍历ul的子元素li并分别为其添加鼠标经过事件使其改变背景颜色，如下代码：

 for(var i=0,l=lis.length;i<l;i++){
      lis[i].onmouseover=function(){
          lis[i].style.background=‘#567‘;
      }
}

但是结果是当鼠标经过li的时候并不能使li改变颜色，这是为什么呢？仔细想想这也没有错误呀！首先遍历ul下的所有第一代子元素li然后添加dom0级事件onmouseover事件，通过一个匿名函数来改变行元素li的背景。但是如果我们稍加修改把以上代码变成如下方式情况就完全不一样了：

1 for(var i=0,l=lis.length;i<l;i++){
2       lis[i].onmouseover=(function(i){
3           return function(){lis[i].style.background=‘#567‘;}
4       }(i));
5 }

这时候当鼠标经过li的时候就能得到我们想要的效果了。这是为什么呢？原来这是闭包在起作用。

js变量不同于c语言等其他语言是块级作用域变量只在大括号里面才有定义，而js函数的作用域是函数作用域，它的作用域在整个函数中都有定义。在for循环中的i与在for循环中外定义i没有什么区别。所以在匿名函数使用i的时候它的值已经被初始化为lis.length了，而i在实际上最大只能取到lis.length-1所以lis.length这个值i是取不到的，所以我们也就看不到任何效果了。当我们把li的事件绑定到一个函数表达式上，并且在函数表达式内部，我们将一个匿名函数作为参数返回出去的话，情况就不一样了。这里的i就是闭包环境下的i可以依次取到每次for循环到的i了。