浅谈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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
原生js 实现表单验证功能
Feb 08 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP中echo和print的区别
2014/08/28 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php生成mysql的数据字典
2016/07/07 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
通过源码分析Python中的切片赋值
2017/05/08 Python
python高阶爬虫实战分析
2018/07/29 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
人民调解员先进事迹材料
2014/05/08 职场文书
药店促销活动总结
2014/07/10 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python