简短几句 通俗解释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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
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校验ISBN码的函数代码
2011/01/17 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python机器学习库常用汇总
2017/11/15 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
对python 调用类属性的方法详解
2019/07/02 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
使用python实现多维数据降维操作
2020/02/24 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
社区安全检查制度
2014/02/03 职场文书
主题党日活动总结
2014/07/08 职场文书
社区文艺活动方案
2014/08/19 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
春季运动会开幕词
2015/01/28 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js