简短几句 通俗解释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 04 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
jQuery动态添加
Apr 07 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php实现插入排序
2015/03/29 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
漂亮的提示信息(带箭头)
2007/03/21 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python如何存储数据到json文件
2020/03/09 Python
Python是什么 Python的用处
2020/05/26 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
自荐信如何制作?
2014/02/21 职场文书
销售总经理岗位职责
2014/03/15 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python