<!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].onclick=function(){
alert(this.number)
}
// (function (i){
// liList[i].onclick=function( ){
// alert('当前点击第'+ i+'个');
// }
// })(i)
}
</script>
</body>
</html>
像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4 但实际结果是每次都是4
原因是：每次点击输出i的时候，函数内部没有i,就从外部函数查找，而外部函数的值是每一次循环后的值4，所以每次点击输出的都是4
解决办法一：加一层闭包，i 以函数参数形式传递给内层函数：
(function (i){
liList[i].onclick=function( ){
alert('当前点击第'+ i+'个');
}
})(i)
解决办法二：找个属性将i值保存起来，然后弹出这个值
liList[i].number=i;
liList[i].onclick=function(){
alert(this.number)
}