简短几句 通俗解释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的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
vue.js todolist实现代码
Oct 29 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue vant中picker组件的使用
Nov 03 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
pytorch 数据集图片显示方法
2018/07/26 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python实现静态服务器
2019/09/05 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
后勤部长岗位职责
2013/12/14 职场文书
教师产假请假条范文
2014/04/10 职场文书
大学生社团活动总结
2014/04/26 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书