理解和运用JavaScript的闭包机制
伟大的爱因斯坦同志说过：“如果你无法向一个 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中的setTime()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js面向对象之继承的相关知识，以及分享了读者弄明白这个知识点的学习心得，对此有需要的朋友参考下吧。2018-02-02
最近在看《JavaScript DOM 编程艺术》， 在此做下笔记。2009-02-02
本文讲解Knockout text绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用，可以用在任何元素上2013-11-11
本文主要详细介绍了Javascript 装载和执行，并附上了详细示例，给有需要的小伙伴们参考下吧2014-11-11
下面小编就为大家带来一篇使用Script元素发送JSONP请求的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
深入理解JavaScript系列（45）：代码复用模式（避免篇）详解
这篇文章主要介绍了深入理解JavaScript系列（45）：代码复用模式（避免篇）详解,本文讲解了默认模式、借用构造函数、借用构造函数并设置原型、共享原型、临时构造函数、klass等内容,需要的朋友可以参考下2015-03-03
JavaScript展开操作符(Spread operator)详解
在本篇文章里小编给大家整理的是关于JavaScript展开操作符(Spread operator)的详细介绍以及用法，需要的读者们参考下。2019-07-07
这篇文章主要介绍了JS合并数组的几种方法及优劣比较,本文讲解了concat、循环插入、reduce等方法合并数组,并对它们的优劣做了比较,需要的朋友可以参考下2014-09-09
一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等2014-03-03
最新评论