浅谈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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
html实现随机点名器的示例代码
Apr 02 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之PHP语法学习笔记1
2006/12/17 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
webpack优化的深入理解
2018/12/10 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
服装设计师职业生涯规划范文
2014/02/28 职场文书
企业授权委托书范本
2014/04/02 职场文书
励志演讲稿500字
2014/08/21 职场文书
生日答谢词
2015/01/05 职场文书
红旗渠导游词
2015/02/09 职场文书
导游词之日月潭
2019/11/05 职场文书