JS 循环给li绑定参数不同的点击事

以下内容纯属个人理解，不正确的地方还请大神留言，不胜感激！

源代码：（按个人方式选用一种即可）

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ul>
 <script type="text/javascript">

            var aLi = document.getElementsByTagName("li");
            
            for(var i=0; i<aLi.length; i++){
                
                /* 方式一（通过调用一个闭包函数，来保存当前变量i） */                
                show(i);
                function show(i){
                    aLi[i].onclick = function(){console.log(i);}
                }

                /* 方式二（方法一的即时调用写法，原理不变）*/
                (function(x){
                    aLi[x].onclick = function(){console.log(x);}
                })(i);

                /* 方式三 (通过给当前节点自定义一个属性值，来保存变量i) */
                aLi[i].index=i;
                aLi[i].onclick = function(){
                    console.log(this.index);
                };

            }    /* end for*/
    </script>

 刚开始的时候不是很理解方法二，经过一番折腾，才弄明白。

 此处对变量i的存储用了"JS闭包"相关的知识，并通过一个“即时函数”来简洁代码

 先看下下面的这个：

    <script type="text/javascript">
        function fun(){
            return 5
        }
        var a=fun;
        var b=fun();
    </script>

函数：JS函数是一种叫做function引用类型的实例，因此函数是一个对象，它保存在内存中，函数名则是指向这个对象的指针。例如以上的 "fun"

var a = fun 意思是把函数名的指针拷贝一份给a，并不是函数的本身，也不是函数执行后的返回值

如果函数名后面加上圆括号，就表示立即调用（执行）这个函数里面的代码（花括号里的代码）。

同理：函数声明和函数表达式在私有作用域写法方面也会在函数体后面加圆括号表示立即调用

同理，我们可以想到像下面这样调用函数

function fun(){
    return 5
}();

然而这样是错误的，因为JavaScript 将function 关键字当作一个函数声明的开始，而函数声明后面不能跟圆括号。然而，函数表达式的后面可以跟圆括号。要将函数声明转换成函数表达式，只要像下面这样给它加上一对圆括号即可。

(function fun(){
    return 5
})();

到这，应该就理解了刚开始的函数执行方式了，只是在括号里加了一个参数i，然后每次弹出i，也就是当前li标签在数组中的下标。

 

扩展：如果想进一步了解，可以看下 " javaScript中如何应用 '即时函数 '模仿块级作用域 ".