for使用var确保 索引跟随点击变化

第一种 通过元素属性绑定

 	<ul id="ul">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    
    <script type="text/javascript">
        var oUl = document.getElementById("ul");  // 获取单个
        var aLi = oUl.getElementsByTagName("li");  // 获取类数组
        let o = 0
        for(var i = 0; i < aLi.length; i++){  
            aLi[i].index=i
            aLi[i].onclick = function (){  
                console.log(this.index)
                //  把索引值 绑定到元素上  通过对象.属性来使用 
                //  或者使用把属性  赋值到 变量上面
            };
        }  

第二种 直接使用let 不使用var

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

es5 中是没有块作用域,在for中var 会变成全局变量, 而for在开始加载额页面的时候就已经开始执行,执行完成之后,函数内部的变量i指向的是全局作用域内的变量i的值,所以当函数执行的时候, 就回去寻找此时此刻变量i的值, 而变量i的值在经历
完循环之后数字已经变成了 i最后的值

es6中的let 是有块级作用域的,所有的函数内部的变量i指向的是局部块级作用域内的变量i的值,所以for循环执行一次就相当于新建了一个块级作用域, 每个块级作用域内都有一个i的值, 而且此值是完全独立的, 所以函数在执行时所用到的i的值都是函数在定义时的i的值