浅谈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 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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的开合式多级菜单程序
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python日期相关操作实例小结
2019/06/24 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
媒体宣传策划方案
2014/05/25 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书