简短几句 通俗解释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 相关文章推荐
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php微信支付之APP支付方法
2015/03/04 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
php实现头像上传预览功能
2017/04/27 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
DOM精简教程
2006/10/03 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python 快速排序代码
2009/11/23 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
应用英语专业自荐信
2014/01/26 职场文书
火灾现场处置方案
2014/05/28 职场文书
企业环保标语
2014/06/10 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers