JS之经典for循环闭包问题解决方法
Posted 朱珠的猪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS之经典for循环闭包问题解决方法相关的知识，希望对你有一定的参考价值。
<!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循环闭包问题解决方法的主要内容，如果未能解决你的问题，请参考以下文章
经典面试题，循环中使用闭包解决 var 定义函数的问题--闭包