简短几句 通俗解释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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
详解vue路由
Aug 05 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
dedecms系统常用术语汇总
2007/04/03 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
python实现图书管理系统
2018/03/12 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python定时器线程池原理详解
2020/02/26 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Python模块常用四种安装方式
2020/10/20 Python
娱乐地球:Entertainment Earth
2020/01/08 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
小加工厂管理制度
2014/01/21 职场文书
经典广告词大全
2014/03/14 职场文书
骨干教师考核方案
2014/05/09 职场文书
优秀求职信
2014/05/29 职场文书
债务授权委托书范本
2014/10/17 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python