理解和运用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代码
Dec 28 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 强制下载文件代码
2010/10/24 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php批量修改表结构实例
2017/05/24 PHP
html下载本地
2006/06/19 Javascript
js 内存释放问题
2010/04/25 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python聚类算法之DBSACN实例分析
2015/11/20 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
英文自我鉴定
2013/12/10 职场文书
小学生安全演讲稿
2014/04/25 职场文书
市场营销调查计划书
2014/05/02 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python