深入理解JavaScript系列(16):閉包(Closures)

NO IMAGE

原文地址為:深入理解JavaScript系列(16):閉包(Closures)

介紹

本章我們將介紹在JavaScript裡大家經常來討論的話題 —— 閉包(closure)。閉包其實大家都已經談爛了。儘管如此,這裡還是要試著從理論角度來討論下閉包,看看ECMAScript中的閉包內部究竟是如何工作的。

正如在前面的文章中提到的,這些文章都是系列文章,相互之間都是有關聯的。因此,為了更好的理解本文要介紹的內容,建議先去閱讀第14章作用域鏈第12章變數物件

英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/

概論

在直接討論ECMAScript閉包之前,還是有必要來看一下函數語言程式設計中一些基本定義。

眾所周知,在函式式語言中(ECMAScript也支援這種風格),函式即是資料。就比方說,函式可以賦值給變數,可以當引數傳遞給其他函式,還可以從函式裡返回等等。這類函式有特殊的名字和結構。

定義

A functional argument (“Funarg”) — is an argument which value is a function.
函式式引數(“Funarg”) —— 是指值為函式的引數。

例子:

function exampleFunc(funArg) {
funArg();
}

exampleFunc(function () {
alert('funArg');
});

上述例子中funarg的實際引數其實是傳遞給exampleFunc的匿名函式。

反過來,接受函式式引數的函式稱為高階函式(high-order function 簡稱:HOF)。還可以稱作:函式式函式或者偏數理或操作符。上述例子中,exampleFunc 就是這樣的函式。

此前提到的,函式不僅可以作為引數,還可以作為返回值。這類以函式為返回值的函式稱為帶函式值的函式(functions with functional value or function valued functions)。

(function functionValued() {
return function () {
alert('returned function is called');
};
})()();

可以以正常資料形式存在的函式(比方說:當引數傳遞,接受函式式引數或者以函式值返回)都稱作 第一類函式(一般說第一類物件)。在ECMAScript中,所有的函式都是第一類物件。

函式可以作為正常資料存在(例如:當引數傳遞,接受函式式引數或者以函式值返回)都稱作第一類函式(一般說第一類物件)。

在ECMAScript中,所有的函式都是第一類物件。

接受自己作為引數的函式,稱為自應用函式(auto-applicative function 或者 self-applicative function):

(function selfApplicative(funArg) {

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

selfApplicative(selfApplicative);

})();

以自己為返回值的函式稱為自複製函式(auto-replicative function 或者 self-replicative function)。通常,“自複製”這個詞用在文學作品中:

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

自複製函式的其中一個比較有意思的模式是讓僅接受集合的一個項作為引數來接受從而代替接受集合本身。

// 接受集合的函式
function registerModes(modes) {
modes.forEach(registerMode, modes);
}

// 用法
registerModes(['roster', 'accounts', 'groups']);

// 自複製函式的宣告
function modes(mode) {
registerMode(mode); // 註冊一個mode
return modes; // 返回函式自身
}

// 用法,modes鏈式呼叫
modes('roster')('accounts')('groups')

//有點類似:jQueryObject.addClass("a").toggle().removClass("b")

但直接傳集合用起來相對來說,比較有效並且直觀。

在函式式引數中定義的變數,在“funarg”啟用時就能夠訪問了(因為儲存上下文資料的變數物件每次在進入上下文的時候就建立出來了):

function testFn(funArg) {
// funarg啟用時, 區域性變數localVar可以訪問了
funArg(10); // 20
funArg(20); // 30

}

testFn(function (arg) {
var localVar = 10;
alert(arg localVar);
});

然而,我們從第14章知道,在ECMAScript中,函式是可以封裝在父函式中的,並可以使用父函式上下文的變數。這個特性會引發funarg問題。

Funarg問題

面向堆疊的程式語言中,函式的區域性變數都是儲存在棧上的,每當函式啟用的時候,這些變數和函式引數都會壓入到該堆疊上。

當函式返回的時候,這些引數又會從棧中移除。這種模型對將函式作為函式式值使用的時候有很大的限制(比方說,作為返回值從父函式中返回)。絕大部分情況下,問題會出現在當函式有自由變數的時候。

自由變數是指在函式中使用的,但既不是函式引數也不是函式的區域性變數的變數

例子:

function testFn() {

var localVar = 10;

function innerFn(innerParam) {
alert(innerParam localVar);
}

return innerFn;
}

var someFn = testFn();
someFn(20); // 30

上述例子中,對於innerFn函式來說,localVar就屬於自由變數。

對於採用面向棧模型來儲存區域性變數的系統而言,就意味著當testFn函式呼叫結束後,其區域性變數都會從堆疊中移除。這樣一來,當從外部對innerFn進行函式呼叫的時候,就會發生錯誤(因為localVar變數已經不存在了)。

而且,上述例子在面向棧實現模型中,要想將innerFn以返回值返回根本是不可能的。因為它也是testFn函式的區域性變數,也會隨著testFn的返回而移除。

還有一個問題是當系統採用動態作用域,函式作為函式引數使用的時候有關。

看如下例子(虛擬碼):

var z = 10;

function foo() {
alert(z);
}

foo(); // 10 – 使用靜態和動態作用域的時候

(function () {

var z = 20;
foo(); // 10 – 使用靜態作用域, 20 – 使用動態作用域

})();

// 將foo作為引數的時候是一樣的
(function (funArg) {

var z = 30;
funArg(); // 10 – 靜態作用域, 30 – 動態作用域

})(foo);

我們看到,採用動態作用域,變數(識別符號)的系統是通過變數動態棧來管理的。因此,自由變數是在當前活躍的動態鏈中查詢的,而不是在函式建立的時候儲存起來的靜態作用域鏈中查詢的。

這樣就會產生衝突。比方說,即使Z仍然存在(與之前從棧中移除變數的例子相反),還是會有這樣一個問題: 在不同的函式呼叫中,Z的值到底取哪個呢(從哪個上下文,哪個作用域中查詢)?

上述描述的就是兩類funarg問題 —— 取決於是否將函式以返回值返回(第一類問題)以及是否將函式當函式引數使用(第二類問題)。

為了解決上述問題,就引入了 閉包的概念。

閉包

閉包是程式碼塊和建立該程式碼塊的上下文中資料的結合。

讓我們來看下面這個例子(虛擬碼):

var x = 20;

function foo() {
alert(x); // 自由變數"x" == 20
}

// 為foo閉包
fooClosure = {
call: foo // 引用到function
lexicalEnvironment: {x: 20} // 搜尋上下文的上下文
};

上述例子中,“fooClosure”部分是虛擬碼。對應的,在ECMAScript中,“foo”函式已經有了一個內部屬性——建立該函式上下文的作用域鏈。

“lexical”通常是省略的。上述例子中是為了強調在閉包建立的同時,上下文的資料就會儲存起來。當下次呼叫該函式的時候,自由變數就可以在儲存的(閉包)上下文中找到了,正如上述程式碼所示,變數“z”的值總是10。

定義中我們使用的比較廣義的詞 —— “程式碼塊”,然而,通常(在ECMAScript中)會使用我們經常用到的函式。當然了,並不是所有對閉包的實現都會將閉包和函式綁在一起,比方說,在Ruby語言中,閉包就有可能是: 一個過程物件(procedure object), 一個lambda表示式或者是程式碼塊。

對於要實現將區域性變數在上下文銷燬後仍然儲存下來,基於棧的實現顯然是不適用的(因為與基於棧的結構相矛盾)。因此在這種情況下,上層作用域的閉包資料是通過 動態分配記憶體的方式來實現的(基於“堆”的實現),配合使用垃圾回收器(garbage collector簡稱GC)和 引用計數(reference counting)。這種實現方式比基於棧的實現效能要低,然而,任何一種實現總是可以優化的: 可以分析函式是否使用了自由變數,函式式引數或者函式式值,然後根據情況來決定 —— 是將資料存放在堆疊中還是堆中。

ECMAScript閉包的實現

討論完理論部分,接下來讓我們來介紹下ECMAScript中閉包究竟是如何實現的。這裡還是有必要再次強調下:ECMAScript只使用靜態(詞法)作用域(而諸如Perl這樣的語言,既可以使用靜態作用域也可以使用動態作用域進行變數宣告)。

var x = 10;

function foo() {
alert(x);
}

(function (funArg) {

var x = 20;

// 變數"x"在(lexical)上下文中靜態儲存的,在該函式建立的時候就儲存了
funArg(); // 10, 而不是20

})(foo);

技術上說,建立該函式的父級上下文的資料是儲存在函式的內部屬性 [[Scope]]中的。如果你還不瞭解什麼是[[Scope]],建議你先閱讀第14章, 該章節對[[Scope]]作了非常詳細的介紹。如果你對[[Scope]]和作用域鏈的知識完全理解了的話,那對閉包也就完全理解了。

根據函式建立的演算法,我們看到 在ECMAScript中,所有的函式都是閉包,因為它們都是在建立的時候就儲存了上層上下文的作用域鏈(除開異常的情況) (不管這個函式後續是否會啟用 —— [[Scope]]在函式建立的時候就有了):

var x = 10;

function foo() {
alert(x);
}

// foo是閉包
foo: <FunctionObject> = {
[[Call]]: <code block of foo>,
[[Scope]]: [
global: {
x: 10
}
],
... // 其它屬性
};

如我們所說,為了優化目的,當一個函式沒有使用自由變數的話,實現可能不儲存在副作用域鏈裡。不過,在ECMA-262-3規範裡任何都沒說。因此,正常來說,所有的引數都是在建立階段儲存在[[Scope]]屬性裡的。

有些實現中,允許對閉包作用域直接進行訪問。比如Rhino,針對函式的[[Scope]]屬性,對應有一個非標準的 __parent__屬性,在第12章中作過介紹:

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]]

這裡還要注意的是:在ECMAScript中,同一個父上下文中建立的閉包是共用一個[[Scope]]屬性的。也就是說,某個閉包對其中[[Scope]]的變數做修改會影響到其他閉包對其變數的讀取:

這就是說:所有的內部函式都共享同一個父作用域

var firstClosure;
var secondClosure;

function foo() {

var x = 1;

firstClosure = function () { return x; };
secondClosure = function () { return --x; };

x = 2; // 影響 AO["x"], 在2個閉包公有的[[Scope]]中

alert(firstClosure()); // 3, 通過第一個閉包的[[Scope]]
}

foo();

alert(firstClosure()); // 4
alert(secondClosure()); // 3

關於這個功能有一個非常普遍的錯誤認識,開發人員在迴圈語句裡建立函式(內部進行計數)的時候經常得不到預期的結果,而期望是每個函式都有自己的值。

var data = [];

for (var k = 0; k < 3; k ) {
data[k] = function () {
alert(k);
};
}

data[0](); // 3, 而不是0
data[1](); // 3, 而不是1
data[2](); // 3, 而不是2

上述例子就證明了 —— 同一個上下文中建立的閉包是共用一個[[Scope]]屬性的。因此上層上下文中的變數“k”是可以很容易就被改變的。

activeContext.Scope = [
... // 其它變數物件
{data: [...], k: 3} // 活動物件
];

data[0].[[Scope]] === Scope;
data[1].[[Scope]] === Scope;
data[2].[[Scope]] === Scope;

這樣一來,在函式啟用的時候,最終使用到的k就已經變成了3了。如下所示,建立一個閉包就可以解決這個問題了:

var data = [];

for (var k = 0; k < 3; k ) {
data[k] = (function _helper(x) {
return function () {
alert(x);
};
})(k); // 傳入"k"值
}

// 現在結果是正確的了
data[0](); // 0
data[1](); // 1
data[2](); // 2

讓我們來看看上述程式碼都發生了什麼?函式“_helper”建立出來之後,通過傳入引數“k”啟用。其返回值也是個函式,該函式儲存在對應的陣列元素中。這種技術產生了如下效果: 在函式啟用時,每次“_helper”都會建立一個新的變數物件,其中含有引數“x”,“x”的值就是傳遞進來的“k”的值。這樣一來,返回的函式的[[Scope]]就成了如下所示:

data[0].[[Scope]] === [
... // 其它變數物件
父級上下文中的活動物件AO: {data: [...], k: 3},
_helper上下文中的活動物件AO: {x: 0}
];

data[1].[[Scope]] === [
... // 其它變數物件
父級上下文中的活動物件AO: {data: [...], k: 3},
_helper上下文中的活動物件AO: {x: 1}
];

data[2].[[Scope]] === [
... // 其它變數物件
父級上下文中的活動物件AO: {data: [...], k: 3},
_helper上下文中的活動物件AO: {x: 2}
];

我們看到,這時函式的[[Scope]]屬性就有了真正想要的值了,為了達到這樣的目的,我們不得不在[[Scope]]中建立額外的變數物件。要注意的是,在返回的函式中,如果要獲取“k”的值,那麼該值還是會是3。

順便提下,大量介紹JavaScript的文章都認為只有額外建立的函式才是閉包,這種說法是錯誤的。實踐得出,這種方式是最有效的,然而,從理論角度來說,在ECMAScript中所有的函式都是閉包。

然而,上述提到的方法並不是唯一的方法。通過其他方式也可以獲得正確的“k”的值,如下所示:

var data = [];

for (var k = 0; k < 3; k ) {
(data[k] = function () {
alert(arguments.callee.x);
}).x = k; // 將k作為函式的一個屬性
}

// 結果也是對的
data[0](); // 0
data[1](); // 1
data[2](); // 2

Funarg和return

另外一個特性是從閉包中返回。在ECMAScript中,閉包中的返回語句會將控制流返回給呼叫上下文(呼叫者)。而在其他語言中,比如,Ruby,有很多中形式的閉包,相應的處理閉包返回也都不同,下面幾種方式都是可能的:可能直接返回給呼叫者,或者在某些情況下——直接從上下文退出。

ECMAScript標準的退出行為如下:

function getElement() {

[1, 2, 3].forEach(function (element) {

if (element % 2 == 0) {
// 返回給函式"forEach"函式
// 而不是返回給getElement函式
alert('found: ' element); // found: 2
return element;
}

});

return null;
}

然而,在ECMAScript中通過try catch可以實現如下效果:

var $break = {};

function getElement() {

try {

[1, 2, 3].forEach(function (element) {

if (element % 2 == 0) {
// // 從getElement中"返回"
alert('found: ' element); // found: 2
$break.data = element;
throw $break;
}

});

} catch (e) {
if (e == $break) {
return $break.data;
}
}

return null;
}

alert(getElement()); // 2

理論版本

這裡說明一下,開發人員經常錯誤將閉包簡化理解成從父上下文中返回內部函式,甚至理解成只有匿名函式才能是閉包。

再說一下,因為作用域鏈,使得所有的函式都是閉包(與函式型別無關: 匿名函式,FE,NFE,FD都是閉包)。

這裡只有一類函式除外,那就是通過Function構造器建立的函式,因為其[[Scope]]只包含全域性物件。

為了更好的澄清該問題,我們對ECMAScript中的閉包給出2個正確的版本定義:

ECMAScript中,閉包指的是:

  1. 從理論角度:所有的函式。因為它們都在建立的時候就將上層上下文的資料儲存起來了。哪怕是簡單的全域性變數也是如此,因為函式中訪問全域性變數就相當於是在訪問自由變數,這個時候使用最外層的作用域。
  2. 從實踐角度:以下函式才算是閉包:
    1. 即使建立它的上下文已經銷燬,它仍然存在(比如,內部函式從父函式中返回)
    2. 在程式碼中引用了自由變數

閉包用法實戰

實際使用的時候,閉包可以建立出非常優雅的設計,允許對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已經在討論“this”的時候介紹過了;這裡,我們將它們看作是應用函式 —— 應用到引數中的函式(在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

總結

本文介紹了更多關於ECMAScript-262-3的理論知識,而我認為,這些基礎的理論有助於理解ECMAScript中閉包的概念。如果有任何問題,我回在評論裡回覆大家。

其它參考

同步與推薦

本文已同步至目錄索引:深入理解JavaScript系列

深入理解JavaScript系列文章,包括了原創,翻譯,轉載等各型別的文章,如果對你有用,請推薦支援一把,給大叔寫作的動力。

轉載請註明本文地址:深入理解JavaScript系列(16):閉包(Closures)