简短几句 通俗解释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表单提交的代码
Sep 13 Javascript
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php实现数字补零的方法总结
2018/09/12 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
班组长岗位职责
2014/03/03 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2016年五一促销广告语
2016/01/28 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS