浅谈js中的闭包


Posted in Javascript onMarch 16, 2015

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

<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闭包能够有所帮助。

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
js生成随机数的过程解析
Nov 24 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 #Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 #Javascript
JavaScript中的DSL元编程介绍
Mar 15 #Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 #Javascript
Javascript中的arguments与重载介绍
Mar 15 #Javascript
JavaScript中的闭包介绍
Mar 15 #Javascript
Javascript中的匿名函数与封装介绍
Mar 15 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python默认参数调用方法解析
2020/02/09 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
PyQt 如何创建自定义QWidget
2021/03/24 Python
销售类个人求职信范文
2013/09/25 职场文书
审计主管岗位职责
2014/01/31 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
多人股份制合作协议书
2016/03/19 职场文书
倡议书怎么写?
2019/04/11 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python
Mysql开启外网访问
2022/05/15 MySQL