闭包案例之循环点击

实现功能：点击每一个 li ，在控制台输出该 li 的序号

<ul class="list">
        <li>cat</li>
        <li>dog</li>
        <li>buff</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li');
        // 原来的方式
        for(var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                console.log(this.index);
            }
        } 

        //闭包
        for (var i = 0; i < lis.length; i++) {
            // 这里 function(i) 这里的 i 是立即执行函数第二个小括号里面的 i 传递而来
            (function (i) {
                lis[i].onclick = function () {
                    console.log(i);

                }
            })(i)
        }
    </script>

闭包每一次执行都要创建一个新的函数空间，没有原来的空间利用率高