js中for循环内的匿名函数使用i的问题及解决方案

问题描述

js中由于作用域链及js运行机制导致的for循环中匿名函数使用i的问题

<!--现有html结构代码如下-->
<ul>
 <li>VueJs</li>
 <li>AngularJs</li>
 <li>ReactJs</li>
 <li>NodeJs</li>
</ul>

// 运行如下代码
var liobjs=document.getElementsByTagName('li');
    for(var i=0;i<liobjs.length;i++){
        liobjs[i].onclick=function(){
        	console.log(i)
    }
 }

无论点击哪个li，输出的 i 值都为： 4

分析

在onclick事件处理函数中，该作用域内没有 i 变量，因此会沿着作用域链往父类中寻找 i，而在for循环中有变量i值，因此事件处理函数中会使用该变量。可是！！由于for循环是同步任务，页面加载完毕后，for循环瞬间就执行完毕了，i 瞬间就变成 4了，在为每个 li 注册好点击事件（异步任务）后，每次点击时，弹出的值都是4

解决方案一

 	// 
	 var liobjs=document.getElementsByTagName('li');
   	 for(var i=0;i<liobjs.length;i++){
    	(function(i){
        	liobjs[i].onclick=function(){
        	console.log(i)
       		} 
    	})(i)
     }

使用自执行函数，并将i作为参数传入，此时 i 从全局变量变为局部变量
依次点击 li 输出：0 1 2 3

解决方案二

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

使用 let 定义变量 i
依次点击 li 输出： 0 1 2 3