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