理解和运用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 省地市级联选择
Feb 07 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
详解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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python 实现return返回多个值
2019/11/19 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
员工安全生产责任书
2014/07/22 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
联谊会开场白
2015/06/01 职场文书
科级干部培训心得体会
2016/01/06 职场文书