ECMA-262-3 in detail——第六章：闭包

介绍 | Introduction

在这一章中我们来谈谈Javascript中被讨论最多的话题之一——关于闭包（closures）。事实上这个主题并不是新鲜的。然而我们在这里将试着更多从理论的角度去分析和理解它，然后我们还会看一下ECMAScript内关于闭包的内容。
前面章节中关于变量对象和作用域链中的一些知识将会作为我们接下来讨论中的一些基础。

一般理论 | General theory

在直接讨论ECMAScript中的闭包之前，需要提到一些关于函数式编程语言基本理论中的一些定义。
众所周知，在函数式语言（ECMAScript支持这种范式和文体）中，函数是数据，换句话说，它们可以赋值给变量，作为其他函数的传递参数，作为其他函数的返回值，等等。这些函数都有独特的名称和结构。

定义 | Definition

函数式参数（functional arguments, “Funarg”），是一种参数，其值为一个函数。
例如：

function exampleFunc(funarg) {
funarg();
}
exampleFunc(function() {
alert("funarg");
});

在这个例子中，和“funarg”对应的实参是传入exampleFunc中的匿名函数。
反过来，接受另一个函数作为其参数的函数被称为高阶函数（higher-order function, HOF）。
HOF的另一个名称是功能式的，或者更数学化的，叫运算符（operator）。上面的例子中，exampleFunc就是一个高阶函数。
当然，函数不仅可以作为传入参数，它也可以作为另一个函数的返回值。
那些将另一个函数作为返回值的函数，称为函数式值的函数（functions with functional value, or function valued functions）。

(function functionValued() {
return function() {
alert("return function called.");
};
})()();

那些可以作为普通数据的函数，换句话说，可以作为传递的参数的函数，或接受函数式参数的函数，或作为函数式返回值的函数，称为第一级函数（first-class functions）。
在ECMAScript中，所有的函数都是第一级函数。
有一种函数将自身作为参数，这类函数称为自应用函数（auto-applicative functions, or self-applicative functions）。

(function selfApplicative(funArg) {
if (funArg && funArg === selfApplicative) {
alert("self-applicative");
return;
}
selfApplicative(selfApplicative);
})();

有一种函数将自身作为返回值，这类函数称为自复制函数（auto-replicative functions, or self-replicative functions）。有时候在书籍中也被称作自我复制（self-reproducing）。（译者按，是返回函数体对象，而不是调用自身，注意和递归的区别）。

(function selfReplicative() {
return selfReplicative;
})();

自复制函数的一个有趣的应用模式是用它看做一种声明形式（declarative form）来逐个处理集合中的单一元素而不是集合本身的时候。例如：

//简单的打印函数
function registerMode(m){
console.log(m);
}
// 一般的处理函数，将集合作为参数
function registerModes(modes) {
modes.forEach(registerMode, modes);
}
registerModes(['roster', 'accounts', 'groups']);
//
// 自复制函数，用来“声明”自身
function modes(mode) {
registerMode(mode); // 处理单个元素
return modes; // 然后继续返回函数以便处理下一个
}
// 用例
modes
('roster')
('accounts')
('groups');

当然，在实际运用中处理集合本身还是更有效和直观的。
当函数作为参数传入时，定义在函数式参数中的局部变量可以在这个函数活化时访问到，因为储存上下文中数据的变量对象在每次进入上下文时创建：

function testFunc(funArg) {
funArg(10);
funArg(20);
}
testFunc(function(arg) {
var localVar = 10;
alert(arg + localVar);
}); // 20, 30

然而，正如我们从第四章中了解到的，ECMAScript中的函数可能包括在父函数中并使用父上下文中的变量。与这个特性相关的就会有一个称为函数式参数问题（funarg problem）的问题。

函数式参数的问题 | Funarg problem

在面向栈的编程语言中，函数的局部变量储存在栈（stack）内，每当函数调用时，这些变量和函数参数就push进栈内。当从函数中返回时，那些变量也从栈中移除。
这个模式对于使用函数作为返回值（即从父函数中返回它们）有很大的限制。最主要的问题是出现在，当一个函数使用自由变量（free variables）时。
自由变量（free variable）是函数中使用的一种变量，但它既不是函数的参数，也不是函数的局部变量。
例如：

function testFn() {
    var localVar = 10;
    function innerFn(innerParam) {
        alert(innerParam + localVar);
    }
    return innerFn;
}
var someFn = testFn();
someFn(20); // 30

在这个例子中，对于函数innerFn而言loacalVar是一个自由变量。
如果这个系统使用的是面向栈的模式来储存局部变量，那么就意味着，当从函数testFn中返回时，它的所有局部变量将从栈中移除。而这将导致在innerFn在外部活化时产生一个错误（找不到局部变量）。
而且，对于这个特殊的例子，在面向栈的实现器中，根本不可能返回innerFn，因为innerFn也是testFn的局部数据，因此也会在从testFn中返回时移除。
另一个和函数式对象相关的问题是在使用动态作用域(dynamic scope)系统的实现器中以函数作为传入参数的情况。例如(伪代码)：

var z = 10;
function foo() {
alert(z);
}
foo(); // 静态作用域和动态作用域下都是10
(function() {
var z = 20;
foo(); // 静态作用域下是10，动态作用域下是20
})();
// 函数作为传入参数时也一样
(function(funArg) {
var z = 30;
funArg(); // 静态作用域下是10，动态作用域下是30
})(foo);

我们看到，在使用动态作用域的系统中，变量解析是由一个储存变量的动态栈管理的。就是说，自由变量在当前活化的动态链中（即在函数调用时的位置上，而不是在函数创建时的静态作用域链中）查找。
而这将产生歧义。那就是，即使这种情况下z是存在的（和上一个例子中的局部变量localVar在函数返回时从栈中移除了），这里的问题是：不同的foo函数的调用中使用的究竟是哪一个z的值（换句话说，哪一个上下文中的z，在哪一个作用域中）？
上面描述的情况就是函数式参数的两类问题——区别在于我们处理的是函数作为另一个函数的返回值（向上的函数式参数 | upward funarg），还是将函数作为另一个函数的传入参数（向下的函数式参数 | downward funarg）。
为了解决这个问题（和它的亚型），人们提出了闭包（closure）的概念。

闭包 | Closure

闭包（Closure）是一个代码块和创建它的上下文中的数据的组合。
让我们用一个伪代码的示例来说明：

var x = 10;
function foo() {
alert(x); //自由变量x == 10
}
// foo的闭包
fooClosure = {
call: <reference to function>, //函数foo的引用
lexicalEnvironment: {x: 10} //用于搜索自由变量的上下文
}

在上面的例子中，fooClosure当然是一个伪代码，在ECMAScript中foo函数已经有了一个储存创建它的上下文的作用域链的内部属性：[[Scope]]。
伪代码中的”lexical”（”词汇的”）常常被省略掉，因为这是不言而喻的。在这个例子中写上是为了让我们注意到，闭包存储的是源代码中词汇位置（the lexical place of source code）——即函数定义的位置处的父变量。当这个函数活化时，自由变量是在这个储存后的（闭包的）上下文中查找，因此，在ECMAScript中，在上一节的最后一个例子中查询到的变量z始终为10。
在定义中，我们使用的是一个广泛的概念——“代码块（code block）”，虽然通常我们指的都是另一个术语“函数”。然而，并不是所有的实现器中的闭包都只和函数相关：例如，在Ruby中，一个闭包可能是：一个程序物件（procedure object）、一个lambda表达式或者一个代码块。
从实现器的角度上说，为了储存那些上下文销毁后的局部变量，基于栈（stack-based）的实现就不再适用了(因为这种储存和基于栈的结构的定义相矛盾)。因此在这种情况下，父上下文的闭包的数据储存在动态内存分配（dynamic memory allocation）中（在“堆” （“heap”）中，换句话说，是基于堆（heap-based）的实现），这个实现使用垃圾收集器（garbage collector, GC）和引用计数（references counting）。这种系统的速度相对于基于栈的系统而言是效率低的。然而，实现器可能总是会优化它：在解析阶段首先判断自由变量是否在函数中被使用，然后根据判断的结果选择将数据放入栈（stack）中还是放入堆(heap)中。

ECMAScript中的闭包实现 | ECMAScript closures implementation

在讨论过理论之后，我们终于来到了和ECMAScript直接相关的闭包的部分。这里需要注意的是，ECMAScript只使用静态（词汇的）作用域（static / lexical scope）(而其他语言，比如Perl中，变量可以声明为静态的或者动态的)。

var x = 10;
function foo() {
alert(x);
}
(function (funArg) {
var x = 20;
//函数式参数的变量'x'是在函数创建时的上下文中“静态”储存的
funArg(); // 10,而不是20
})(foo);

从技术上说，函数父上下文中的变量储存在函数的内部属性[[Scope]]中。因此，如果完全理解了第四章中的[[Scope]]和作用域链内容，理解ECMAScript中的闭包是不难的。
根据函数创建的算法，我们发现ECMAScript中的所有函数都是闭包的，因为它们都会在创建时保存父上下文的作用域链。这里的重点是，无论函数是否在之后会被活化，父作用域已经在它创建时保存到它的属性中了：

var x = 10;
function foo() {
  alert(x);
}
o
//foo是一个闭包，它拥有代码块和上下文中的数据
foo: <FunctionObject> = {
  [[Call]]: <code block of foo>,
  [[Scope]]: [
    global: {x: 10}
  ],
  ... //其他属性
}

我们之前提到过，出于优化的考虑，当一个函数不使用自由变量时，实现器可能不会保存它的父作用域链。然而，在ECMA-262-3规范中并没有任何关于这一点的内容；因此，正式情况下（并且根据函数创建的算法）——所有的函数在创建时都将保存它的父作用域链到属性[[Scope]]上。
一些实现器允许直接访问闭包的作用域。例如在Rhino中，在第二章.变量对象中我们讨论过一个对应于函数的[[Scope]]属性的非标准属性 parent ：

var global = this;
var x = 10;
var foo = (function() {
var y = 20;
return function() {
alert(y);
};
})();
foo(); // 20
alert(foo.__parent__.y); // 20
foo.__parent__.y = 30;
foo(); // 30
alert(foo.__parent__.__parent__ === global); // true
alert(foo.__parent__.__parent__.x); // 10

一对多的[[Scope]]值 | one [[Scope]] value for them all

需要注意的是，在ECMAScript中，同一个父上下文创建的若干个内部函数的闭包的[[Scope]]是同一个对象。这就意味着，在一个闭包中改变被闭包的变量（译者按：自由变量）将会影响到它在其他闭包中的值。
就是说，所有的内部函数共用相同的父作用域链。

var firstClosure, secondClosure;
function foo() {
var x = 1;
firstClosure = function() { return ++x; };
secondClosure = function() { return --x; };
x = 2; 影响AO['x']，AO同时储存在上面两个函数[[Scope]]中
alert(firstClosure());
}
foo(); //3, AO['x'] == 3
alert(firstClosure()); // 4, AO['x'] == 4
alert(secondClosure()); // 3

关于这个特性有一个常见的错误。那就是，当人们在一个循环中创建函数，试图将每一个函数分别与循环的计数变量关联，以使得每一个函数都有它自己的值，但结果常常并不是像期望的那样。

var data = [];
for(var i = 0; i < 3; i++) {
data[i] = function() {
alert(i);
};
}
data[0]();  // 3, not 0
data[1]();  // 3, not 1
data[2]();  // 3, not 2

上一个例子解释了这个结果——对于这3个函数而言，创建函数的上下文的作用域是相同的。每一个函数都通过[[Scope]]属性引用它，而这个父作用域内的变量i很容易就被改变了。
示意图：

activeContext.Scope = [
... // 更高的变量对象
{data: [...], i: 3}
];
data[0].[[Scope]] === Scope;
data[1].[[Scope]] === Scope;
data[2].[[Scope]] === Scope;

因此，在函数活化时，使用的是变量i的最后赋值3。
这一点和变量创建的阶段有关，即，变量创建是在代码执行阶段之前的进入上下文阶段中发生的。
创建额外的封闭的上下文可以解决这一问题：

var data = [];
for(var i = 0; i < 3; i++) {
data[i] = (function _helper(k) {
return function() {
alert(k);
};
})(i);
}
data[0]();  // 0
data[1]();  // 1
data[2]();  // 2
//译者按：上面的循环也可以写作下面的形式，本质都是添加额外的封闭作用域
for(var i = 0; i < 3; i++) {
(function _helper(k) {
data[k] = function() {
alert(k);
};
})(i);
}
//此外，这两种形式下for循环的大括号可以省略掉

让我们来看看这种情况下发生了什么。
首先，函数_helper被创建并马上活化，同时传入参数i。
然后，函数_helper的返回值也是一个函数，并且这个函数被保存到data数组的相应元素中。
这个技术提供了以下效果：_helper函数在每一次活化时都创建了新的拥有不同参数k的活化对象，而这个参数的值是传入的变量i的值。
也就是说，返回函数的[[Scope]]如下：

data[0].[[Scope]] === [
...
AO of parent context: {data: [...], i: 3},
AO of _helper context: {k: 0}
];
data[1].[[Scope]] === [
...
AO of parent context: {data: [...], i: 3},
AO of _helper context: {k: 1}
];
data[2].[[Scope]] === [
...
AO of parent context: {data: [...], i: 3},
AO of _helper context: {k: 2}
];

我们看到，现在函数的[[Scope]]属性有了所需要的值的引用——通过额外创建的作用域中的变量k。
注意，从返回的函数中我们仍然可以获得变量i的引用——值仍然都是3。
Javascript中的闭包常常被不完整地认为只体现在上面的模式中——通过创建额外的函数来捕获所需要的值。从实际的角度上说，这个模式确实很有名，然而从理论的角度上说，ECMAScript中的所有函数都是闭包的。
上面的模式并不是得到正确的计数变量i的唯一方式，例如，也可以通过下面的方式：

var data = [];
for(var i = 0; i < 3; i++) {
(data[i] = function _helper() {
alert(arguments.callee.k);
}).k = i; //将i保存到函数的属性上
}
data[0]();  // 0
data[1]();  // 1
data[2]();  // 2

Funarg and return

另一个特性是关于闭包中的返回值。在ECMAScript中，一个return语句将控制流从一个闭包中返回到一个调用上下文中（a caller）。在别的语言中，比如Ruby，不同形式的闭包对return语句的处理也可能各不相同：可能返回到调用者，也可能是从一个激活的上下文中完全离开。
ECMAScript中标准的return行为：

function getElement() {
[1, 2, 3].forEach(function(elm) {
if (elm === 2) {
alert("found " + elm); // found 2
// 返回到forEach函数，而不是返回到getElement
return elm;
}
});
return null;
}
alert(getElement()); // null

（译者按：由于上面的情况是从forEach循环函数中的其中一次中返回值，因此不能简单地将循环函数赋值给变量然后返回变量。而要用到下面的方法）当然，如果需要在上面的例子中获得循环函数中的返回值，那么可以使用throw和try-catch语句来捕获这个特殊的“异常”：

var $break = {};
function getElement() {
try {
[1, 2, 3].forEach(function(elm) {
if (elm === 2) {
alert("found " + elm); // found 2
$break.data = elm;
throw $break;
}
});
} catch (e) {
if ($break == e) {
return $break.data;
}
}
return null;
}
alert(getElement());  // 2

理论的不同版本 | Theory versions

正如我们注意到的，程序员们常常不完整地将闭包理解为只是指从父上下文中返回内部函数。甚至只是把它理解为匿名函数。
让我们再来重申一下：所有的函数，无关它们的类型——匿名的、命名的、函数表达式、或者函数声明，由于作用域链的机制，它们都是闭包。
这里有一个例外，那就是通过函数类构造式（Function(…)）创建的函数，这类函数的[[Scope]]中只包含全局对象。
为了澄清这个问题，我们提供两种版本的关于ECMAScript中闭包的正确表述。
ECMAScript中的闭包是：
从理论的角度上：所有的函数，由于它们都在创建时保存了父上下文中的变量。即使是一个简单的全局函数，它也能通过一般作用域链的机制引用全局上下文中的变量（自由变量）。
从实际的角度上：是下面两种情况下的函数：

在父上下文结束后仍然存在的函数。比如作为父函数返回值的内部函数。
使用自由变量的函数。

闭包的实际应用 | Practical usage of closures

在实际中，闭包常常用来创建优雅设计，通过使用函数式参数（“funarg”）来实现各种自定义计算。例如，数组的sort方法允许传入排序条件函数作为参数：

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

或者例如，数组的map方法中传入函数式参数作为条件：

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

它也常常用来方便地实现搜索函数，通过将函数式参数作为搜索条件：

someCollection.find(function(elm) {
return elm.someProperty == "searchCondition";
});

同样，它也用来应用（apply）函数，例如，在forEach方法中对数组应用一个函数：

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

顺便说一句，函数对象的方法call和apply，也是起源于函数式编程语言中的应用函数（applying functionals）。我们在第三章谈到this关键字时已经讨论过这两种方法；这里，我们看到的是它们扮演着应用函数的角色——函数应用为参数（在apply中是参数列表，在call中是具体位置的参数）：

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

闭包的另一个重要的应用是延迟调用（deferred calls）：

var a = 10;
setTimeout(function() {
alert(a);
}, 1000);

还有回调函数：

...
var x = 10;
xmlHttpRequestObject.onreadystatechange = function() {
alert(x);
}

或者，创建封装的作用域以便于隐藏辅助对象：

var foo = {};
(function(object) {
var x =10;
object.getX = function() {
return x;
};
})(foo);
alert(foo.getX()); // 10

总结 | Conclusion

这一章里，相比ECMAScript的部分而言理论的部分更多一些，然而，我想这些一般理论能更有助于澄清关于闭包和ECMAScript中函数的一些方面。下一章开始是面向对象。