简短几句 通俗解释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中绑定事件的命名空间详解
Apr 05 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
javascript几个易错点记录
Nov 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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生成不重复随机数的方法汇总
2014/11/19 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
actionscript与javascript的区别
2011/05/25 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python中decorator使用实例
2015/04/14 Python
python中循环语句while用法实例
2015/05/16 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python pymongo模块用法示例
2018/03/31 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
如何在python中判断变量的类型
2020/07/29 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
端午节活动策划方案
2014/03/09 职场文书
个人工作主要事迹
2014/05/08 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年药房工作总结
2014/11/22 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
 python中的元类metaclass详情
2022/05/30 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技