一、何谓“闭包”?

所谓“闭包(Closure)”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

描述的如此学术的官方解释,相信很少人能够理解,其实所有的函数都是一个闭包,不过我们所说的“闭包”通常指的是函数嵌套所产生的闭包。这种闭包更 为强大,它可以用优雅的方式来处理一些棘手的问题,有些程序员戏谑没有闭包简直就活不下去了,这虽然有些夸张,但从侧面却恰恰说明闭包有着非常强大的功 能。

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" language="javascript">
function a(){
var i=0;
return function b() {
alert(++i);
}
}
c=a();
c();
</script>

这就是一个使用闭包的简单示例,代码执行完毕后,函数对象并不会被垃圾回收机制(Garbage Collection)回收,函数内的临时变量就能够得以长期存在,有些类似静态变量的意味,而且值得一提的是,这个变量只能够被闭包函数修改,在外部是无法访问和修改的。

*垃圾回收机制:如果某个对象不再被引用,该对象将被回收。

二、闭包内的微观世界

如图所示,函数B的作用域链总共包含了3个部分:函数B的作用域、函数A的作用域和全局Window作用域。

三、闭包的应用

1、循环绑定事件的参数传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
 
<script type="text/javascript" language="javascript">
function bind_alert(i) {
return function() {
alert(i);
}
}
 
(function() {
var target=document.getElementsByTagName("li");
for(var i=0;i<target.length;i++) {
//target[i].attachEvent('onclick',alert(i));
target[i].attachEvent('onclick',bind_alert(i));
}
})();
</script>

2、设置延时或间隔时候的参数传递

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" language="javascript">
function call_later(param1,param2) {
return function() {
alert("param1 is:"+param1+"\n");
alert("param2 is:"+param2);
}
}
setTimeout(call_later("dierbaby","paulguo"),5000);
setInterval(call_later("dierbaby","paulguo"),5000);
</script>

3、用闭包实现程序的暂停执行功能

1
2
3
4
5
6
7
8
9
10
11
<input type="button" value="Continue!" onclick="test()" />
<script type="text/javascript" language="javascript">
var test = (function() {
alert(1);
alert(2);
return function() {
alert(3);
alert(4);
}
})();
</script>

4、自动执行的匿名函数

1
2
3
4
5
6
7
8
<script>
(function(param) {
alert(param);
var inner="hi";
})("dier");
 
alert(inner);
</script>

这是闭包应用的一个非主流例子,这种形式并非我们通常所谓的“闭包”。我们创建了一个匿名函数并立即执行,由于外部对象无法引用它内部的变量,因此这些变量在函数执行完后很快就会被释放,关键是这种机制不会污染全局对象。

5、实现代码的封装和模块化,实现私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" language="javascript">
var person=function() {
var _name="default";
return {
getName:function() {
return _name;
},
setName:function(newName) {
_name=newName;
}
}
}();
 
alert(person._name);//undefined
alert(person.getName());//default
person.setName("dierbaby");
alert(person.getName());//dierbaby
</script>

其实Javascript是不能直接实现像C语言中那样的私有成员的,不过在开发的时候,习惯性的统一约定以”_”下划线开头的变量为私有变量。

虽然如此,但是凭借Javascript强大的灵活性,我们完全可以间接的实现私有成员。从上述代码的运行结果可以看出,函数内部的作用域在外部是 无法访问的,但是通过闭包的形式可以访问,从而间接的实现了让person对象具有了私有变量_name,上边的代码还有另外一种表现形式,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" language="javascript">
var person=new function() {
var _name="default";
this.getName=function() {
return _name;
};
this.setName=function(newName) {
_name=newName;
};
}();
 
alert(person._name);//undefined
alert(person.getName());//default
person.setName("dierbaby");
alert(person.getName());//dierbaby
</script>

虽然换了马甲,但是其实还是同样一个事物,只不过在这种表现形式下,闭包显得稍加隐晦,但是闭包还是闭包,它还是那么的强大。

6、实现面向对象中的对象

其实在上边一个例子中我们已经用到了这一特性,但是为了和其它语言中对象的实现形式更加相似,我们将上述代码再次加以改造,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" language="javascript">
function person() {
var _name="default";
this.getName=function() {
return _name;
};
this.setName=function(newName) {
_name=newName;
};
};
 
var guokai=new person();
alert(guokai._name);//undefined
alert(guokai.getName());//default
guokai.setName("guokai");
alert(guokai.getName());//guokai
</script>

四、使用闭包的代价

由于浏览器自身的缺陷,使用闭包时候很可能会造成内存泄露现象,这种现象在IE中尤为突出,内存泄露是一个比较严重的问题,轻则会影响浏览器的响应速度,降低用户体验,重则会造成浏览器无响应等现象。

JavaScript的脚本解释器具备一种垃圾回收机制,一般采用的是引用计数的形式,如果一个对象的引用计数为零,垃圾回收机制就会将其回收,这个过程是自动的。但是一旦当垃圾回收机制碰到了闭包,这个过程就变得复杂起来了。

在闭包中,因为局部变量可能在将来的某些时刻需要被使用,因此垃圾回收机制不会处理这些被外部引用到的局部变量,因此,倘若一旦出现循环引用,就会容易造成内存泄漏。

js闭包(二)的更多相关文章

  1. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  2. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  3. js闭包(closure),个人理解

    一.闭包概念理解 各种专业文献上对js"闭包"(closure)定义非常抽象,贼难看懂.我的理解是,闭包就是能够读取某函数内部变量的函数.由于在Javascript语言中只有在函数 ...

  4. js闭包vs Java内部类

    前言: 昨天写了一个关于Java内部的博客,在内部类的最后一点中谈到了Java闭包的概念,他是这样定义闭包的:闭包是一个可调用的对象,它记录了一些信息,这些信息来自创建它的作用域.结合Java的内部类 ...

  5. js闭包实例汇总

    本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...

  6. js闭包的作用

    js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文   我们来看 ...

  7. 探讨js闭包

    背景:爱就要大胆说出来,对于编程我只想说,喜欢就大胆写出来.喜欢却不行动那就意味着失败.所以,对于在研究编程的猿们,我对同伴们说,大胆的学,大胆的写.呵呵,说这些其实无非是给我自己点动力,写下去的勇气 ...

  8. javascript深入理解js闭包(转)

    javascript深入理解js闭包 转载  2010-07-03   作者:    我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  9. js闭包中的this(匿名函数中的this指向的是windows)

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  10. js闭包作用(避免使用全局变量)

    js闭包作用(避免使用全局变量) 一.总结 1.优点::可以把局部变量驻留在内存中,可以避免使用全局变量; 2.缺点:也有占用更多内存的缺点,用完要及时让垃圾回收器回收  fn=null //应及时解 ...

随机推荐

  1. 搜索4--noi6264:走出迷宫

    搜索4--noi6264:走出迷宫 一.心得 可以去看看别人的代码,吸收精华 二.题目 6264:走出迷宫 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 当 ...

  2. Uninstall Office 2016 for Mac

    官方原文:https://support.office.com/en-us/article/Uninstall-Office-2016-for-Mac-eefa1199-5b58-43af-8a3d- ...

  3. 项目管理理论与实践(5)——UML应用(下)

    本篇文章介绍UML的相关知识.参考<UML从入门到精通> 六.状态机视图 1. 概述 状态机视图通过对类对象的生存周期建立模型来描述对象随时间变化的动态行为.状态是给定类的对象的一组属性值 ...

  4. ps6-图层基础与操作技巧

    1.图层的新建.复制与删除 ctrl+j:复制图层,可以用复制选区作为新图层 Shift+Ctrl+Alt+e:在新的空白图层将下面所有的图层合并为一个图层. 2.选择复制与链接图层 在移动图层时,按 ...

  5. 2018-2019-2 20165210《网络对抗技术》Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165210<网络对抗技术>Exp6 信息搜集与漏洞扫描 一.实验目标: 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实验内容: 各种搜索技巧的应用 G ...

  6. queue容器

    一.queue特性 queue是一种先进先出(first in first out,FIFO)的数据结构,它有两个口,数据元素只能从一个口进,从另一个口出.队列只允许从队尾加入元素,队头删除元素,必须 ...

  7. PHP实现图片压缩的两则实例(转)

    本文介绍了PHP实现图片压缩的两种方法,读者可以根据具体应用参考或加以改进,以适应自身应用需求!废话不多说,主要代码部分如下: 实例1: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  8. JavaScript函数的默认参数(default parameter)

    JavaScript函数的默认参数(default parameter) js函数参数的默认值都是undefined, ES5里,不支持直接在形参里写默认值.所以,要设置默认值,就要检测参数是否为un ...

  9. MySQL最新版本 MySQL5.7.11 批量自动化一键式安装(转)

    --背景云端 以前都喜欢了源码安装MySQL,总觉得源码是高大上的事情,不过源码也需要时间,特别是make的时候,如果磁盘和cpu差的话,时间很长很长,在虚拟机上安装mysql尤其甚慢了. 现在业务发 ...

  10. scala 定时器

    假如我们要开发一个定时器,该定时器每秒钟执行一定的动作,我们如何把要执行的动作传给定时器?最直观的回答是:传一个实现动作的函数(function) object Helloworld { def on ...