浅析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 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python 连接各类主流数据库的实例代码
2018/01/30 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python 中如何写注释
2020/08/28 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
银行先进个人总结
2015/02/15 职场文书
党小组评议意见
2015/06/02 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS