<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,实参 }