<!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)
???????????}
JS之经典for循环闭包问题解决方法
原文地址：https://www.cnblogs.com/zhumingyong/p/8994636.html