浅析javascript闭包 实例分析

官方解释
“闭包”是一个拥有许多变量和绑定了这些变量的环境表达式(通常是一个函数),因而这些变量也是环境表达式的一部分。
通俗解释
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(…){…}
}

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
复制代码 代码如下: /* * zoomCheck */ jQuery(function($){ var dCheck = $("#zoomCheck"); if(dCheck.size() != 0){ return; } dCheck = $("span/span").attr('id',"zoomCheck").css({ position :'fixed', left : '5px' }).hide().appendTo('body'); var time; time = setInterval(
昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭……他是金球奖得主、欧洲金靴、欧冠冠军核心,在葡萄牙队……9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: span!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/
常见的动画有四种类型,介绍一下: linear:线性动画,即匀速 easeIn:速度从小到大,即淡入 easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出 其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子 我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值 再看一个稍复杂的: 这个有淡入效果,也就是说动画开始时,值的变化量从小到大
利用js来验证文本框的值 复制代码 代码如下: script function onblurs(){ if(frm.name.value==""){ alert("请输入您的名字!"); }else if(frm.funny.value==""){ alert("爱好不得为空哦!"); } } /script form name="frm" tr td你的姓名:/td tdinput type="text" id="name" onblur="onblus()"//td /trtr td你的爱好:/td t
aspx 复制代码 代码如下: script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"/script script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"/script script type="text/javascript" var myar1;var myar2; function N
eg_1. 在页面中查找某id图片集合,先放到代码: 复制代码 代码如下: div id="cacheLayerContainer-CBS-882" img src="" id="CBS_1_0" img src="" id="CBS_1_1" img src="" id="CBS_1_2" img src="" id="CBS_2_0" img src="" id="CBS_2_1" img src="" id="CBS_3_0" /div 在其中查找id中包含"CBS_1"的img,使用$("img[
本文实例讲述了jQuery简单实现遍历数组的方法。分享给大家供大家参考。具体如下: var members=["1","2","3"];//index为数组的下标//value为数组下标对应的值$.each(members,function(index,value){ alert(value);}); 希望本文所述对大家的jQuery程序设计有所帮助。
一、引子 复制代码 代码如下: var a = {n:1}; a.x = a = {n:2}; alert(a.x); // -- undefined 这是蔡蔡在看 jQuery源码 时发现这种写法的。以上第二句 a.x = a = {n:2} 是一个连续赋值表达式。这个连续赋值表达式在引擎内部究竟发生了什么?是如何解释的? 二、猜想 猜想1:从左到右赋值,a.x 先赋值为{n:2},但随后 a 赋值为 {n:2},即 a 被重写了,值为 {n:2},新的 a 没有 x属性,因此为undefined。步骤
想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。 jQuery代码: 复制代码 代码如下: $(function(){ var $comment = $('#comment'); $('.bigger').click(function(){ if(!$comment.is(":animated")){ if($comment.height() 500){ //$comment.height($comment.height() + 50); $comment.anima

浅谈jquery事件处理 - 2015-05-22 06:05:18

在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件。就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理。 那么,如何解决这个问题呢?而我,想到了backbone中的events。如下: 复制代码 代码如下: events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" } 也就是,把事件聚集到一起,类似