<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<hr>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">闭包经典实例</h3>
<div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script >
var liList=document.getElementsByTagName('li');
for(var i=0;i<liList.length;i++){
liList[i].number=i;
liList[i].οnclick=function(){
alert(this.number)
}
// (function (i){
// liList[i].οnclick=function( ){
// alert('当前点击第'+ i+'个');
// }
// })(i)
}
</script>
</body>
</html>
像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4 但实际结果是每次都是4
原因是:每次点击输出i的时候,函数内部没有i,就从外部函数查找,而外部函数的值是每一次循环后的值4,所以每次点击输出的都是4
解决办法一:加一层闭包,i 以函数参数形式传递给内层函数:
(function (i){
liList[i].οnclick=function( ){
alert('当前点击第'+ i+'个');
}
})(i)
解决办法二:找个属性将i值保存起来,然后弹出这个值
liList[i].number=i;
liList[i].οnclick=function(){
alert(this.number)
}