简短几句 通俗解释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 表单验证类介绍与实例
Jun 09 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JavaScript函数定义方法实例详解
Mar 05 Javascript
JS中async/await实现异步调用的方法
Aug 28 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP缓冲区用法总结
2016/02/14 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
详解js闭包
2014/09/02 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
详解Python中for循环的使用
2015/04/14 Python
python 不以科学计数法输出的方法
2018/07/16 Python
django的model操作汇整详解
2019/07/26 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python中判断文件结束符的具体方法
2020/08/04 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Django中使用Celery的方法步骤
2020/12/07 Python
毕业生自我鉴定实例
2014/01/21 职场文书
会计顶岗实习心得
2014/01/25 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
加强党性修养心得体会
2016/01/21 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书