简短几句 通俗解释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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vuex的API文档说明详解
Feb 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
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python发展史及网络爬虫
2019/06/19 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
C++是不是类型安全的
2014/02/18 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
妇产医师自荐信
2014/01/29 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
党务公开方案
2014/05/06 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
教师节主题班会教案
2015/08/17 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript