简短几句 通俗解释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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
javascript快速排序算法详解
Sep 17 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
关于ES6尾调用优化的使用
Sep 11 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
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
javascript学习之json入门
2016/12/22 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Django中FilePathField字段的用法
2020/05/21 Python
python语言是免费还是收费的?
2020/06/15 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
实习心得体会
2014/01/02 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
初中体育教学随笔
2015/08/15 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书