js通过实例介绍关于闭包的用法
分类：实例代码
闭包是一个比较晦涩难以理解的概念，特别是对于没有任何编程经验的新手来说。
如果完全就是一大通的理论，这也许很不利于一些朋友对于此概念的理解，下面就通过实例代码的方式来介绍一下。
下面先来看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
</head>
<script type="text/javascript">
window.onload=function(){
var a=document.getElementsByTagName("a");
function b(){
for(var index=0;index<a.length;index++){
a[index].onclick=function(){
alert(index);
}
}
}
b();
}
</script>
<body>
<a href="#">前端教程网一</a>
<a href="#">前端教程网二</a>
<a href="#">前端教程网三</a>
</body>
</html>
上面的代码本来意图是，点击链接的时候，能够弹出对应的链接的索引值。
但是令人失望的是，每一次都是弹出3，下面介绍一下原因:
上述函数未能达到目的的原因是，事件处理函数绑定了变量index，而该事件处理函数又赋值给onclick，也就是说只有在点击a标签的时候才会调用该函数，因此从逻辑上来说，在单纯的for循环里面function(){alert(index);}这段函数实际上是没有执行的，而当我们点击a标签的时候for循环早就已经执行完毕，此时index的值就是for循环执行完毕的终态值。通俗一点理解，就是这个index的值是属于b函数的，而我们需要的i的值是实时传递进事件处理函数中的值，使用闭包就可以解决上述问题，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
</head>
<script type="text/javascript">
window.onload=function(){
var a=document.getElementsByTagName("a");
function b(){
for(var index=0;index<a.length;index++){
a[index].onclick=function(index){
return function(){
alert(index);
}
}(index);
}
}
b();
}
</script>
<body>
<a href="#">前端教程网一</a>
<a href="#">前端教程网二</a>
<a href="#">前端教程网三</a>
</body>
</html>
关于闭包的更多内容可以参阅javascript闭包概念简单解析一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu