javascript循环不能正确输出i值的问题

示例代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
 </ul>
<script>
    var list = document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        list[i].onclick = function () {
            alert(i);
        }
    }
</script>

问题：希望输出点击li当前的索引值，但是结果却全都是5；
原因：此时onclick是一个闭包函数，每次引用的都是外部函数的最后一个变量，而此时i已经循环完毕，值为5
解决办法：
方法一：将循环中的 i 值设置为事件对象的属性，在上面的例子中，事件对象就是lis[i];

    var list = document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        list[i].index =i;
        list[i].onclick = function () {
            alert(this.index);
        }
    }

方法二：外层加一个立即调用的匿名函数，此时每次调用onclick函数时，传入的参数时外层函数的e,也就时逐个传入的 i 值

    var list = document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        (function (e) {
            list[i].onclick = function () {
                alert(e);
            }
        })(i)
    }

方法三：仍然选择使用匿名函数，事件函数调用时调用的值arg是外层函数的arg，此值是逐个又i传入的！

    var list = document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        list[i].onclick = (function (arg) {
            return function () {
                alert(arg);
            }
        })(i)
    }

方法四：Function方法

var list = document.getElementsByTagName("li");
    for ( i=0;i<list.length ;i++ )
    {
        list[i].onclick=new Function("alert(" + i + ");");   //每次都会出new一个新函数
    }

方法五：ES6的let方法，低版本浏览器会报错。

    var list = document.getElementsByTagName("li");
    for (let i=0;i<list.length ;i++ )
    {
        list[i].onclick = function() {
            alert(i);
        }
    }

参考引用：https://www.cnblogs.com/younylight/p/7744894.html