闭包

<body>
    <h3>JS中的闭包陷阱</h3>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
       var list = document.querySelectorAll('button');
       for(var i=0;i<list.length;i++){
           var b = list[i];
           b.onclick = function(){
               console.log(i);
           }
       };
    </script>
 </body>

打印结果都是3

原因：变量i就1个，并且这段代码不仅是对外公开了一个变量i，还公开了三个不同的监听函数，分别绑定给不同的按钮。

修改成：

方法一

<script>
    var list = document.querySelectorAll('button');
    for (var i = 0; i < list.length; i++) {
        var b = list[i];
        (function (i) {
            b.onclick = function () {
                alert(i);
            }
        })(i)
    };
</script>

 //方法二：匿名函数变成有名函数
for(var i=0;i<list.length;i++){
     var b = list[i];
     b.onclick = (function(num){//外部函数--此处传递形参num，注意不能再取i为变量名，否则又会重复
        return function(){//内部函数
        console.log(num);
            }
     })(i);//闭包上下文变量i，实参
}