js中for循环中绑定事件（lis[i]与this 不能相互替换的原因）

先附上代码

for( i =0;i<lis.length;i++)
        {
			console.log("e" + i);
			
            lis[i].onclick = function(){
                //干掉其他人
                for(var j=0;j<lis.length;j++)
                {
                    lis[j].className = "";
					//console.log(j);
					
                }
                //留下我自己
				console.log(i);//每次都输出的5
            this.className = "current";
           // lis[i].className = "current";//重点的一行
                // 2.下面的显示内容模块  
            }
        }

本来我写的是lis[i].className = “current”，但是一打开浏览器就会报错

然后我通过做log标记的方法
终于搞清楚了原因：
我先在最外层的for循环里面写了一个console.log(“e” + i); 他告诉我了for循环在什么时候执行，然后我打开浏览器，这时候神奇的事情出现了：
浏览器直接就输出了这几个值
因为我的这个函数和点击事件有关系，我本以为要我点击按钮，才能执行for循环，可是他直接执行了，所以我就想，那里面的onclick事件很可能在我没有点击时就已经被处理了。
于是，我在onclick下面写了 console.log(i);//每次都输出的5

结果更神奇，我每点击一次按钮，都会输出一个5,也就是说，在我点击之前，for循环已经执行完了，所以i才能为5.
到这，也就清楚了为什么lis[i]为什么不能和this 替换了，每次都是lis[5]，而事实上lis【4】才是最大的下标。
所以搞清楚这个问题，我们就应该明白for循环的执行流程：
for循环先执行，然后对每一个lis[i]绑定onclick事件（即注册事件），但是并不执行（因为没有点击），for循环结束后,每次点击按钮都会触发这个事件，但此时已经和for循环没啥关系了，相当于每个onclick事件都成为了lis[i]的一个属性，而此时i为5，自然就不能 起到相应的作用了。