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闭包概念简单解析一章节。 

回复

我来回复
  • 暂无回复内容