简短几句 通俗解释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的面向对象方法以及差别
Mar 31 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
自荐信模版
2013/10/24 职场文书
大学班级计划书
2014/04/29 职场文书
2014年度工作总结报告
2014/12/15 职场文书
地心历险记观后感
2015/06/15 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript