浅析javascript闭包 实例分析


Posted in Javascript onDecember 25, 2010

官方解释
“闭包”是一个拥有许多变量和绑定了这些变量的环境表达式(通常是一个函数),因而这些变量也是环境表达式的一部分。
通俗解释
Javascript中所有的函数都是一个闭包。不过一般来说,嵌套的function产生的闭包更为强大,也是大部分时候我们所说的“闭包”。看如下代码:

<script type="text/javascript"> 
<!-- 
//外层函数a 
function a(){ 
//临时变量i 
var i = 0; 
//内层函数b 
function b(){ 
//引用外层临时变量i 
alert(++i); 
} 
//执行结果,返回内层函数b 
return b; 
} 
//执行外层函数a,同时给c一个指向内层函数b的引用 
//若按正常理解,此语句执行完后i将被GC回收,此时的i应为“undefine” 
var c = a(); 
//执行内层函数,由于闭包的缘故,函数b中i仍然引用的是外部的临时变量i 
c(); 
--> 
</script>

这段脚本在执行完var c=a()之后,变量c实际上就指向了函数b,b中用到了变量i,再执行c()后就会弹出一个窗口显示i的值。这段代码其实就是一个闭包,为什么?因为函数a外的变量c引用了函数a内部的函数b。
Javascript的垃圾回收机制
由于javascript特殊的垃圾回收机制,才导致了闭包的产生。Javascript垃圾回收机制的大体规则如下:
在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象相互引用,而不再被第3者引用,那么这两个互相引用的对象也会被回收。而在上述的脚本中,函数a被b引用,函数b又被函数a外的c所引用,这就是为什么函数a执行后不被回收的原因。
闭包的应用场景
1. 保护函数内的变量安全。以上面的例子为例,函数a中变量i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
2. 在内存中维持一个变量。依然如上面的例子,由于闭包,函数a中的i一直存在于内存中,因此每次执行c(),i都会加1。
3. 通过保护变量的安全实现JS私有属性和私有方法(不能被外部访问)。如下,私有属性和私有方法在Constructor外是无法访问的:
function Constructor(…){ 
var that = this; 
var membername = value; 
function membername(…){…} 
}
Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
使用js画图之饼图
Jan 12 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 #Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 #Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 #Javascript
JQuery live函数
Dec 24 #Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 #Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
You might like
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
公司活动总结范文
2014/07/01 职场文书
2015年个人审计工作总结
2015/04/07 职场文书