for循环输出时变量冲突的问题

<ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>

    var lis = document.querySelectorAll('li')

    // //错误示范
    // //ES5只有全局作用域和函数作用域
    // //最后打印的i的值都是lis.length的值
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log(i);
        }
    }

解决方法：

    // 1.
    // ES6新增了let来声明变量 并拥有块级作用域
    // 一对大括号 {} 视为一个块级作用域
    // 这里的变量i拥有块级作用域 互相不干扰
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log(i);
        }
    }

    // 2.
    for (var i = 0; i < lis.length; i++) {
        //给每个li添加一个index属性，值为i
        lis[i].index = i
        //这里的this指向事件源对象，也就是li[i]
        //所以打印的值为当前点击的lis[i]中的i的值
        lis[i].onclick = function () {
            console.log(this.index);
        }
    }

    // 3.
    for (var i = 0; i < lis.length; i++) {
        //立即执行函数
        //定义形参
        (function (a) {
            lis[a].onclick = function () {
                console.log(a);
            }
            //实参传入i 每次循环i的值不同
        }(i))
    }