浅谈js中的闭包

 更新时间:2015年03月16日 09:23:20   投稿:hebedich  
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样.闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等.

首先我们先来看一段代码:

复制代码 代码如下:

<a href="javascript:void(0);">111</a>
<a href="javascript:void(0);">222</a>
<a href="javacsript:void(0);">333</a>
var a=document.getElementsByTagName("a");
  function b(){
    for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
      alert(i);
    }  
  }
}

  按照我们设计的初衷,应该是点击一个a标签就相应的弹出该标签的序列号,即点击第一个a就弹出0,点击第二个就弹出1...但是事实是弹出的始终是a标签的个数,这是什么原因呢?这个问题困扰了我很久,查阅了许多网上的资料还有参考书籍,大多说的似是而非,相信也有许多同学对其中原因也不甚了解,就这个问题我谈谈自己的理解,如有不当之处,还请批评指正。

  就我个人的理解,上述函数未能达到目的的原因是,事件处理函数绑定了变量i,而该事件处理函数又赋值给了onclick,即是说只有在点击a标签的时候才会调用该函数,因此从逻辑上来说,在单纯的for循环里面function(){alert(i);}这段函数实际上是没有执行的,而当我们点击a标签的时候for循环早就已经执行完毕,此时i的值就是for循环执行完毕的终态值。通俗一点理解,就是这个i的值是属于b函数的,而我们需要的i的值是实时传递进事件处理函数中的值。那么有什么方法可以实现我们的设计初衷呢?聪明的同学可能已经猜到了,那就是使用闭包。

下面我们再来看一段代码:

复制代码 代码如下:

var a=document.getElementsByTagName("a");
  function b(){
    for(var i=0;i<a.length;i++){
      a[i].onclick=function(j){
        return function(){
        alert(j);
      }
    }(i);
  }
}
b();

  执行以上代码可以发现,我们所要的功能已经实现,即点击任意a标签都会弹出该标签所在的序列号。对上述代码,相信许多同学都看过许多雷同的版本,但是为什么这样做就能实现我们需要的功能了呢,一下是个人的一点浅见,如有不当,还请不吝赐教。

  对上述代码的理解,其本质就是对变量i的理解。在这段代码中,函数执行到for循环处发现了一个立即调用函数,这个时候给这个立即调用函数传递实时的i变量值,函数立即调用完成,事件处理函数也就存储了实时的i变量值。

以上所述就是本文的全部内容了,希望对大家理解js闭包能够有所帮助。

相关文章

  • 利用JS十分钟判断数组中存在元素的多种方式

    利用JS十分钟判断数组中存在元素的多种方式

    这篇文章主要给大家介绍了关于利用JS十分钟判断数组中存在元素的多种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 详解Javascript继承的实现

    详解Javascript继承的实现

    这篇文章主要介绍了详解Javascript继承的实现的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript中this机制是如何真正工作的

    JavaScript中this机制是如何真正工作的

    JavaScript中this机制提供了更优雅的方式来隐含地“传递”一个对象引用,导致更加干净的API设计和更容易的复用,this既不是函数自身的引用,也不是函数词法作用域的引用,this实际上是在函数被调用时建立的一个绑定,它指向什么是完全由函数被调用的调用点来决定的
    2023-11-11
  • js创建元素(节点)示例

    js创建元素(节点)示例

    本文为大家介绍下使用js是如何创建元素(节点)的,感兴趣的朋友不要错过
    2014-01-01
  • 客户端 使用XML DOM加载json数据的方法

    客户端 使用XML DOM加载json数据的方法

    我们取出数据后可以以json的形式传到前端处理,也可以以Xml Dom的形式传到前端进行处理。下边例子是利用Jquery处理XML Dom的例子。
    2010-09-09
  • 如何通过javascript操作web控件的自定义属性

    如何通过javascript操作web控件的自定义属性

    这篇文章主要是对如何通过javascript操作web控件的自定义属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所 帮助
    2013-11-11
  • 详解可以用在VS Code中的正则表达式小技巧

    详解可以用在VS Code中的正则表达式小技巧

    这篇文章主要介绍了详解可以用在VS Code中的正则表达式小技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JS将秒换成时分秒实现代码

    JS将秒换成时分秒实现代码

    将秒换成时分秒的方法有很多,在本文将为大家介绍下,使用js的具体的实现思路,有需要的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • 详解bootstrap-fileinput文件上传控件的亲身实践

    详解bootstrap-fileinput文件上传控件的亲身实践

    这篇文章主要介绍了详解bootstrap-fileinput文件上传控件的亲身实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • js获取form的方法

    js获取form的方法

    这篇文章主要介绍了js获取form的方法,实例分析了javascript操作form表单的技巧,需要的朋友可以参考下
    2015-05-05

最新评论