理解和运用JavaScript的闭包机制


Posted in Javascript onAugust 13, 2015

伟大的爱因斯坦同志说过:“如果你无法向一个 6 岁小孩解释清楚某问题,那说明你自己都没整明白”。然而,当我向一个 27 岁的朋友解释什么是闭包时,却彻底失败了。

这原本是国外某哥们儿在 Stack Overflow 上对 JavaScript 闭包所提出的问题。不过既然此问题是在 Stack Overflow 提出的,当然也会有很多高手出来解答,其中有些回答确实是经典,如下面这个:

如果在一个外部函数中再定义一个内部函数,即函数嵌套函数,那么内部函数也可以访问外部函数中的变量:

function foo(x) {
 var tmp = 3;
 function bar(y) {
 alert(x + y + (++tmp));
 }
 bar(10);
}

foo(2); // alert 16
foo(2); // alert 16
foo(2); // alert 16

此段代码可以正确执行,并返回结果:16,因为 bar 能访问外部函数的变量 tmp, 同时也能访问外部函数 foo 的参数 x。但以上示例不是闭包!

要实现闭包的话,需要将内部函数作为外部函数的返回值返回,内部函数在返回前,会将所有已访问过的外部函数中的变量在内存中锁定,也就是说,这些变量将常驻 bar 的内存中,不会被垃圾回收器回收,如下:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + (++tmp));
 }
}
var bar = foo(2); // bar 现在是个闭包了
bar(10); // alert 16
bar(10); // alert 17
bar(10); // alert 18

上述代码中,第一次执行 bar 时,仍会返回结果:16,因为 bar 仍然可以访问 x 及 tmp,尽管它已经不直接存在于 foo 的作用域内。那么既然 tmp 被锁定在 bar 的闭包里,那么每次执行 bar 的时候,tmp 都会自增一次,所以第二次和第三次执行 bar 时,分别返回 17 和 18。

此示例中,x 仅仅是个纯粹的数值,当 foo 被调用时,数值 x 就会作为参数被拷贝至 foo 内。

但是 JavaScript 处理对象的时候,使用的总是引用,如果用一个对象作为参数来调用 foo,那么 foo 中传入的实际上是原始对象的引用,所以这个原始对象也相当于被闭包了,如下:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar = foo(age); // bar 现在是个闭包了
bar(10); // alert 15 1
bar(10); // alert 16 2
bar(10); // alert 17 3

和期望的一样,每次执行 bar(10) 时,不但 tmp 自增了,x.memb 也自增了,因为函数体内的 x 和函数体外的 age 引用的是同一个对象。

via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

补充:通过以上示例,应该能比较清楚的理解闭包了。如果觉得自己理解了,可以试着猜猜下面这段代码的执行结果:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar1 = foo(age); // bar1 现在是个闭包了
bar1(10); // alert 15 1
bar1(10); // alert 16 2
bar1(10); // alert 17 3

var bar2 = foo(age); // bar2 现在也是个闭包了
bar2(10); // alert ? ?
bar2(10); // alert ? ?
bar2(10); // alert ? ?

bar1(10); // alert ? ?
bar1(10); // alert ? ?
bar1(10); // alert ? ?

实际使用的时候,闭包可以创建出非常优雅的设计,允许对funarg上定义的多种计算方式进行定制。如下就是数组排序的例子,它接受一个排序条件函数作为参数:

[1, 2, 3].sort(function (a, b) {
 ... // 排序条件
});

同样的例子还有,数组的map方法是根据函数中定义的条件将原数组映射到一个新的数组中:

[1, 2, 3].map(function (element) {
 return element * 2;
}); // [2, 4, 6]

使用函数式参数,可以很方便的实现一个搜索方法,并且可以支持无限制的搜索条件:

someCollection.find(function (element) {
 return element.someProperty == 'searchCondition';
});

还有应用函数,比如常见的forEach方法,将函数应用到每个数组元素:

[1, 2, 3].forEach(function (element) {
 if (element % 2 != 0) {
  alert(element);
 }
}); // 1, 3

顺便提下,函数对象的 apply 和 call方法,在函数式编程中也可以用作应用函数。 这里,我们将它们看作是应用函数 —— 应用到参数中的函数(在apply中是参数列表,在call中是独立的参数):

(function () {
 alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

闭包还有另外一个非常重要的应用 —— 延迟调用:

var a = 10;
setTimeout(function () {
 alert(a); // 10, after one second
}, 1000);
还有回调函数:

//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
 // 当数据就绪的时候,才会调用;
 // 这里,不论是在哪个上下文中创建
 // 此时变量“x”的值已经存在了
 alert(x); // 10
};
//...

还可以创建封装的作用域来隐藏辅助对象:

var foo = {};

// 初始化
(function (object) {

 var x = 10;

 object.getX = function _getX() {
  return x;
 };

})(foo);

alert(foo.getX()); // 获得闭包 "x" ? 10
Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
JavaScript的==运算详解
Jul 20 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 #Javascript
JavaScript的面向对象编程基础
Aug 13 #Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 #Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 #Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 #Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 #Javascript
深入学习JavaScript中的原型prototype
Aug 13 #Javascript
You might like
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
常用的javascript function代码
2008/05/23 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python功能键的读取方法
2015/05/28 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python help函数实例用法
2020/12/06 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
服装设计专业求职信
2014/06/16 职场文书
五一晚会主持词
2015/07/01 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL