简短几句 通俗解释javascript的闭包


Posted in Javascript onJanuary 17, 2011

何谓没有被释放资源的栈区和预执行的过程,用一个最常见的示例来解释:
比方现在我们有一个ul,下面有很多个li,需要遍历他们为他们绑定单击事件,并在点击后将当前下标传递给另外一个function来进行额外的处理:

for(var i=0; i<agroup.length; i++) { 
agroup[i].onclick = function() { 


handler(i); 

} 
}

执行结果显而易见对吧?在handler中,获取传递过去的参数i,你看到的将全部是最大的下标,这个时候,我们通常用下面的办法解决:
for(var i=0; i<agroup.length; i++) { 
agroup[i].i = i 

agroup[i].onclick = function() { 


handler(this.i); 

} 
}

那么在这里,先讲一下this的指向问题,从通常来说,javascript中的this是指向当前引用他的对象的。上面我们相当为this新增了一个为i的属性,他的值就是当前的下标值。
那么用闭包的方式如何解决这个问题?其实原理相同,我们需要预先的把i值保存起来,或叫作传递:
for(var i=0; i<agroup.length; i++) { 
agroup[i].onclick = function(index) { 


return function() { 



handler(index); 


} 

}(i); 
}

这个时候你会得到正确的下标,这样做与增加i属性有何雷同之处?也就是他们都预先把下标i值传递或是储存起来。在上面的演示中,预执行onclick所引用的函数,而这个
函数当中返回了一个内嵌函数,形成一个没有被释放资源的栈区,并在预执行的时候将i值以参数的形式传入这个作用域(解释能力有问题,这句解释不知道是否准确,欢迎砖拍)。
综上所述,闭包的作用通常是改变作用域或预执行。应该看官很明白了,上面个出的示例很局限,闭包的应用范围是很广的,了解其因果,才能灵活的使用它。
auntion 2011-11-15
mail Auntion@gmail.com
QQ 82874972
原创文章,请尊重打字的辛劳和作者的权益,转载时请不要删除这里的作者信息。
Javascript 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
javascript 内存回收机制理解
Jan 17 #Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 #Javascript
关于COOKIE个数与大小的问题
Jan 17 #Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 #Javascript
Jquery 插件开发笔记整理
Jan 17 #Javascript
JQuery学习笔记 nt-child的使用
Jan 17 #Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python 数据结构之旋转链表
2017/02/25 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
2014年征兵标语
2014/06/20 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技