深入理解JavaScript系列(10) JavaScript核心（晉級(jí)高手必讀篇）
原作者: Dmitry A. Soshnikov
發(fā)布時(shí)間: 2010-09-02
原文：http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
參考1：http://ued.ctrip.com/blog/?p=2795
參考2：http://www.cnblogs.com/ifishing/archive/2010/12/08/1900594.html
主要是綜合了上面2位高手的中文翻譯，將兩篇文章的精華部分都結(jié)合在一起了。
我們首先來(lái)看一下對(duì)象[Object]的概念，這也是ECMASript中最基本的概念。
對(duì)象Object
ECMAScript是一門(mén)高度抽象的面向?qū)ο?object-oriented)語(yǔ)言，用以處理Objects對(duì)象. 當(dāng)然，也有基本類(lèi)型，但是必要時(shí)，也需要轉(zhuǎn)換成object對(duì)象來(lái)用。
An object is a collection of properties and has a single prototype object. The prototype may be either an object or the null value.
Object是一個(gè)屬性的集合，并且都擁有一個(gè)單獨(dú)的原型對(duì)象[prototype object]. 這個(gè)原型對(duì)象[prototype object]可以是一個(gè)object或者null值。
復(fù)制代碼
讓我們來(lái)舉一個(gè)基本Object的例子，首先我們要清楚，一個(gè)Object的prototype是一個(gè)內(nèi)部的[[prototype]]屬性的引用。
不過(guò)一般來(lái)說(shuō)，我們會(huì)使用__<內(nèi)部屬性名>__ 下劃線來(lái)代替雙括號(hào)，例如__proto__(這是某些腳本引擎比如SpiderMonkey的對(duì)于原型概念的具體實(shí)現(xiàn)，盡管并非標(biāo)準(zhǔn))。
var foo = {
x: 10,
y: 20
};
上述代碼foo對(duì)象有兩個(gè)顯式的屬性[explicit own properties]和一個(gè)自帶隱式的 __proto__ 屬性[implicit __proto__ property]，指向foo的原型。
圖 1. 一個(gè)含有原型的基本對(duì)象
為什么需要原型呢，讓我們考慮 原型鏈 的概念來(lái)回答這個(gè)問(wèn)題。
原型鏈（Prototype chain）
原型對(duì)象也是普通的對(duì)象，并且也有可能有自己的原型，如果一個(gè)原型對(duì)象的原型不為null的話(huà)，我們就稱(chēng)之為原型鏈（prototype chain）。
A prototype chain is a finite chain of objects which is used to implemented inheritance and shared properties.原型鏈?zhǔn)且粋€(gè)由對(duì)象組成的有限對(duì)象鏈由于實(shí)現(xiàn)繼承和共享屬性。
想象一個(gè)這種情況，2個(gè)對(duì)象，大部分內(nèi)容都一樣，只有一小部分不一樣，很明顯，在一個(gè)好的設(shè)計(jì)模式中，我們會(huì)需要重用那部分相同的，而不是在每個(gè)對(duì)象中重復(fù)定義那些相同的方法或者屬性。在基于類(lèi)[class-based]的系統(tǒng)中，這些重用部分被稱(chēng)為類(lèi)的繼承 – 相同的部分放入class A，然后class B和class C從A繼承，并且可以聲明擁有各自的獨(dú)特的東西。
ECMAScript沒(méi)有類(lèi)的概念。但是，重用[reuse]這個(gè)理念沒(méi)什么不同（某些方面，甚至比class-更加靈活），可以由prototype chain原型鏈來(lái)實(shí)現(xiàn)。這種繼承被稱(chēng)為delegation based inheritance-基于繼承的委托，或者更通俗一些，叫做原型繼承。
類(lèi)似于類(lèi)”A”，”B”，”C”，在ECMAScript中尼創(chuàng)建對(duì)象類(lèi)”a”，”b”，”c”，相應(yīng)地， 對(duì)象“a” 擁有對(duì)象“b”和”c”的共同部分。同時(shí)對(duì)象“b”和”c”只包含它們自己的附加屬性或方法。
var a = { x: 10, calculate: function (z) { return this.x + this.y + z }}; var b = { y: 20, __proto__: a}; var c = { y: 30, __proto__: a}; // 調(diào)用繼承過(guò)來(lái)的方法b.calculate(30); // 60c.calculate(40); // 80
這樣看上去是不是很簡(jiǎn)單啦。b和c可以使用a中定義的calculate方法，這就是有原型鏈來(lái)[prototype chain]實(shí)現(xiàn)的。
原理很簡(jiǎn)單:如果在對(duì)象b中找不到calculate方法(也就是對(duì)象b中沒(méi)有這個(gè)calculate屬性), 那么就會(huì)沿著原型鏈開(kāi)始找。如果這個(gè)calculate方法在b的prototype中沒(méi)有找到，那么就會(huì)沿著原型鏈找到a的prototype，一直遍歷完整個(gè)原型鏈。記住，一旦找到，就返回第一個(gè)找到的屬性或者方法。因此，第一個(gè)找到的屬性成為繼承屬性。如果遍歷完整個(gè)原型鏈，仍然沒(méi)有找到，那么就會(huì)返回undefined。
注意一點(diǎn)，this這個(gè)值在一個(gè)繼承機(jī)制中，仍然是指向它原本屬于的對(duì)象，而不是從原型鏈上找到它時(shí)，它所屬于的對(duì)象。例如，以上的例子，this.y是從b和c中獲取的，而不是a。當(dāng)然，你也發(fā)現(xiàn)了this.x是從a取的，因?yàn)槭峭ㄟ^(guò)原型鏈機(jī)制找到的。
如果一個(gè)對(duì)象的prototype沒(méi)有顯示的聲明過(guò)或定義過(guò)，那么__prototype__的默認(rèn)值就是object.prototype, 而object.prototype也會(huì)有一個(gè)__prototype__, 這個(gè)就是原型鏈的終點(diǎn)了，被設(shè)置為null。
下面的圖示就是表示了上述a,b,c的繼承關(guān)系
圖 2. 原型鏈
原型鏈通常將會(huì)在這樣的情況下使用：對(duì)象擁有 相同或相似的狀態(tài)結(jié)構(gòu)(same or similar state structure) （即相同的屬性集合）與 不同的狀態(tài)值(different state values)。在這種情況下，我們可以使用 構(gòu)造函數(shù)(Constructor) 在 特定模式(specified pattern) 下創(chuàng)建對(duì)象。
構(gòu)造函數(shù)(Constructor)
除了創(chuàng)建對(duì)象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object) 。原型對(duì)象存放于 ConstructorFunction.prototype 屬性中。
例如，我們重寫(xiě)之前例子，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象“b”和“c”，那么對(duì)象”a”則扮演了“Foo.prototype”這個(gè)角色：
// 構(gòu)造函數(shù)
function Foo(y) {
// 構(gòu)造函數(shù)將會(huì)以特定模式創(chuàng)建對(duì)象：被創(chuàng)建的對(duì)象都會(huì)有"y"屬性
this.y = y;
}
// "Foo.prototype"存放了新建對(duì)象的原型引用
// 所以我們可以將之用于定義繼承和共享屬性或方法
// 所以，和上例一樣，我們有了如下代碼：
// 繼承屬性"x"
Foo.prototype.x = 10;
// 繼承方法"calculate"
Foo.prototype.calculate = function (z) {
return this.x + this.y + z;
};
// 使用foo模式創(chuàng)建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
// 調(diào)用繼承的方法
b.calculate(30); // 60
c.calculate(40); // 80
// 讓我們看看是否使用了預(yù)期的屬性
console.log(
b.__proto__ === Foo.prototype, // true
c.__proto__ === Foo.prototype, // true
// "Foo.prototype"自動(dòng)創(chuàng)建了一個(gè)特殊的屬性"constructor"
// 指向a的構(gòu)造函數(shù)本身
// 實(shí)例"b"和"c"可以通過(guò)授權(quán)找到它并用以檢測(cè)自己的構(gòu)造函數(shù)
b.constructor === Foo, // true
c.constructor === Foo, // true
Foo.prototype.constructor === Foo // true
b.calculate === b.__proto__.calculate, // true
b.__proto__.calculate === Foo.prototype.calculate // true
);
上述代碼可表示為如下的關(guān)系：
圖 3. 構(gòu)造函數(shù)與對(duì)象之間的關(guān)系
上述圖示可以看出，每一個(gè)object都有一個(gè)prototype. 構(gòu)造函數(shù)Foo也擁有自己的__proto__, 也就是Function.prototype, 而Function.prototype的__proto__指向了Object.prototype. 重申一遍，F(xiàn)oo.prototype只是一個(gè)顯式的屬性，也就是b和c的__proto__屬性。
這個(gè)問(wèn)題完整和詳細(xì)的解釋可以在大叔即將翻譯的第18、19兩章找到。有兩個(gè)部分：面向?qū)ο缶幊?一般理論(OOP. The general theory)，描述了不同的面向?qū)ο蟮姆妒脚c風(fēng)格(OOP paradigms and stylistics)，以及與ECMAScript的比較, 面向?qū)ο缶幊?ECMAScript實(shí)現(xiàn)(OOP. ECMAScript implementation), 專(zhuān)門(mén)講述了ECMAScript中的面向?qū)ο缶幊獭?
現(xiàn)在，我們已經(jīng)了解了基本的object原理，那么我們接下去來(lái)看看ECMAScript里面的程序執(zhí)行環(huán)境[runtime program execution]. 這就是通常稱(chēng)為的“執(zhí)行上下文堆?！盵execution context stack]。每一個(gè)元素都可以抽象的理解為object。你也許發(fā)現(xiàn)了，沒(méi)錯(cuò)，在ECMAScript中，幾乎處處都能看到object的身影。
執(zhí)行上下文棧(Execution Context Stack)
在ECMASscript中的代碼有三種類(lèi)型：global, function和eval。
每一種代碼的執(zhí)行都需要依賴(lài)自身的上下文。當(dāng)然global的上下文可能涵蓋了很多的function和eval的實(shí)例。函數(shù)的每一次調(diào)用，都會(huì)進(jìn)入函數(shù)執(zhí)行中的上下文,并且來(lái)計(jì)算函數(shù)中變量等的值。eval函數(shù)的每一次執(zhí)行，也會(huì)進(jìn)入eval執(zhí)行中的上下文，判斷應(yīng)該從何處獲取變量的值。
注意，一個(gè)function可能產(chǎn)生無(wú)限的上下文環(huán)境，因?yàn)橐粋€(gè)函數(shù)的調(diào)用（甚至遞歸）都產(chǎn)生了一個(gè)新的上下文環(huán)境。
function foo(bar) {}
// 調(diào)用相同的function，每次都會(huì)產(chǎn)生3個(gè)不同的上下文
//（包含不同的狀態(tài)，例如參數(shù)bar的值）
foo(10);
foo(20);
foo(30);
一個(gè)執(zhí)行上下文可以激活另一個(gè)上下文，就好比一個(gè)函數(shù)調(diào)用了另一個(gè)函數(shù)(或者全局的上下文調(diào)用了一個(gè)全局函數(shù))，然后一層一層調(diào)用下去。邏輯上來(lái)說(shuō)，這種實(shí)現(xiàn)方式是棧，我們可以稱(chēng)之為上下文堆棧。
激活其它上下文的某個(gè)上下文被稱(chēng)為 調(diào)用者(caller) 。被激活的上下文被稱(chēng)為被調(diào)用者(callee) 。被調(diào)用者同時(shí)也可能是調(diào)用者(比如一個(gè)在全局上下文中被調(diào)用的函數(shù)調(diào)用某些自身的內(nèi)部方法)。
當(dāng)一個(gè)caller激活了一個(gè)callee，那么這個(gè)caller就會(huì)暫停它自身的執(zhí)行，然后將控制權(quán)交給這個(gè)callee. 于是這個(gè)callee被放入堆棧，稱(chēng)為進(jìn)行中的上下文[running/active execution context]. 當(dāng)這個(gè)callee的上下文結(jié)束之后，會(huì)把控制權(quán)再次交給它的caller，然后caller會(huì)在剛才暫停的地方繼續(xù)執(zhí)行。在這個(gè)caller結(jié)束之后，會(huì)繼續(xù)觸發(fā)其他的上下文。一個(gè)callee可以用返回（return）或者拋出異常（exception）來(lái)結(jié)束自身的上下文。
如下圖，所有的ECMAScript的程序執(zhí)行都可以看做是一個(gè)執(zhí)行上下文堆棧[execution context (EC) stack]。堆棧的頂部就是處于激活狀態(tài)的上下文。
圖 4. 執(zhí)行上下文棧
當(dāng)一段程序開(kāi)始時(shí)，會(huì)先進(jìn)入全局執(zhí)行上下文環(huán)境[global execution context], 這個(gè)也是堆棧中最底部的元素。此全局程序會(huì)開(kāi)始初始化，初始化生成必要的對(duì)象[objects]和函數(shù)[functions]. 在此全局上下文執(zhí)行的過(guò)程中，它可能會(huì)激活一些方法（當(dāng)然是已經(jīng)初始化過(guò)的），然后進(jìn)入他們的上下文環(huán)境，然后將新的元素壓入堆棧。在這些初始化都結(jié)束之后，這個(gè)系統(tǒng)會(huì)等待一些事件（例如用戶(hù)的鼠標(biāo)點(diǎn)擊等），會(huì)觸發(fā)一些方法，然后進(jìn)入一個(gè)新的上下文環(huán)境。
見(jiàn)圖5，有一個(gè)函數(shù)上下文“EC1″和一個(gè)全局上下文“Global EC”，下圖展現(xiàn)了從“Global EC”進(jìn)入和退出“EC1″時(shí)棧的變化:
圖 5. 執(zhí)行上下文棧的變化
ECMAScript運(yùn)行時(shí)系統(tǒng)就是這樣管理代碼的執(zhí)行。
關(guān)于ECMAScript執(zhí)行上下文棧的內(nèi)容請(qǐng)查閱本系列教程的第11章執(zhí)行上下文(Execution context)。
如上所述，棧中每一個(gè)執(zhí)行上下文可以表示為一個(gè)對(duì)象。讓我們看看上下文對(duì)象的結(jié)構(gòu)以及執(zhí)行其代碼所需的 狀態(tài)(state) 。
執(zhí)行上下文(Execution Context)
一個(gè)執(zhí)行的上下文可以抽象的理解為object。每一個(gè)執(zhí)行的上下文都有一系列的屬性（我們稱(chēng)為上下文狀態(tài)），他們用來(lái)追蹤關(guān)聯(lián)代碼的執(zhí)行進(jìn)度。這個(gè)圖示就是一個(gè)context的結(jié)構(gòu)。
圖 6. 上下文結(jié)構(gòu)
除了這3個(gè)所需要的屬性(變量對(duì)象(variable object)，this指針(this value)，作用域鏈(scope chain) )，執(zhí)行上下文根據(jù)具體實(shí)現(xiàn)還可以具有任意額外屬性。接著，讓我們仔細(xì)來(lái)看看這三個(gè)屬性。
變量對(duì)象(Variable Object)
A variable object is a scope of data related with the execution context.
It's a special object associated with the context and which stores variables and function declarations are being defined within the context.
變量對(duì)象(variable object) 是與執(zhí)行上下文相關(guān)的 數(shù)據(jù)作用域(scope of data) 。
它是與上下文關(guān)聯(lián)的特殊對(duì)象，用于存儲(chǔ)被定義在上下文中的 變量(variables) 和 函數(shù)聲明(function declarations) 。
復(fù)制代碼
注意：函數(shù)表達(dá)式[function expression]（而不是函數(shù)聲明[function declarations，區(qū)別請(qǐng)參考本系列第2章]）是不包含在VO[variable object]里面的。
變量對(duì)象（Variable Object）是一個(gè)抽象的概念，不同的上下文中，它表示使用不同的object。例如，在global全局上下文中，變量對(duì)象也是全局對(duì)象自身[global object]。（這就是我們可以通過(guò)全局對(duì)象的屬性來(lái)指向全局變量）。
讓我們看看下面例子中的全局執(zhí)行上下文情況：
var foo = 10;
function bar() {} // // 函數(shù)聲明
(function baz() {}); // 函數(shù)表達(dá)式
console.log(
this.foo == foo, // true
window.bar == bar // true
);
console.log(baz); // 引用錯(cuò)誤，baz沒(méi)有被定義
全局上下文中的變量對(duì)象(VO)會(huì)有如下屬性：
圖 7. 全局變量對(duì)象
如上所示，函數(shù)“baz”如果作為函數(shù)表達(dá)式則不被不被包含于變量對(duì)象。這就是在函數(shù)外部嘗試訪問(wèn)產(chǎn)生引用錯(cuò)誤(ReferenceError) 的原因。請(qǐng)注意，ECMAScript和其他語(yǔ)言相比(比如C/C++)，僅有函數(shù)能夠創(chuàng)建新的作用域。在函數(shù)內(nèi)部定義的變量與內(nèi)部函數(shù)，在外部非直接可見(jiàn)并且不污染全局對(duì)象。使用 eval 的時(shí)候，我們同樣會(huì)使用一個(gè)新的(eval創(chuàng)建)執(zhí)行上下文。eval會(huì)使用全局變量對(duì)象或調(diào)用者的變量對(duì)象(eval的調(diào)用來(lái)源)。
那函數(shù)以及自身的變量對(duì)象又是怎樣的呢?在一個(gè)函數(shù)上下文中，變量對(duì)象被表示為活動(dòng)對(duì)象(activation object)。
活動(dòng)對(duì)象(activation object)
當(dāng)函數(shù)被調(diào)用者激活，這個(gè)特殊的活動(dòng)對(duì)象(activation object) 就被創(chuàng)建了。它包含普通參數(shù)(formal parameters) 與特殊參數(shù)(arguments)對(duì)象(具有索引屬性的參數(shù)映射表)?；顒?dòng)對(duì)象在函數(shù)上下文中作為變量對(duì)象使用。
即：函數(shù)的變量對(duì)象保持不變，但除去存儲(chǔ)變量與函數(shù)聲明之外，還包含以及特殊對(duì)象arguments 。
考慮下面的情況：
function foo(x, y) {
var z = 30;
function bar() {} // 函數(shù)聲明
(function baz() {}); // 函數(shù)表達(dá)式
}
foo(10, 20);
“foo”函數(shù)上下文的下一個(gè)激活對(duì)象(AO)如下圖所示：
圖 8. 激活對(duì)象
同樣道理，function expression不在AO的行列。
對(duì)于這個(gè)AO的詳細(xì)內(nèi)容可以通過(guò)本系列教程第9章找到。
我們接下去要講到的是第三個(gè)主要對(duì)象。眾所周知，在ECMAScript中，我們會(huì)用到內(nèi)部函數(shù)[inner functions]，在這些內(nèi)部函數(shù)中，我們可能會(huì)引用它的父函數(shù)變量，或者全局的變量。我們把這些變量對(duì)象成為上下文作用域?qū)ο骩scope object of the context]. 類(lèi)似于上面討論的原型鏈[prototype chain]，我們?cè)谶@里稱(chēng)為作用域鏈[scope chain]。
作用域鏈(Scope Chains)
A scope chain is a list of objects that are searched for identifiers appear in the code of the context.
作用域鏈?zhǔn)且粋€(gè) 對(duì)象列表(list of objects) ，用以檢索上下文代碼中出現(xiàn)的 標(biāo)識(shí)符(identifiers) 。
復(fù)制代碼
作用域鏈的原理和原型鏈很類(lèi)似，如果這個(gè)變量在自己的作用域中沒(méi)有，那么它會(huì)尋找父級(jí)的，直到最頂層。
標(biāo)示符[Identifiers]可以理解為變量名稱(chēng)、函數(shù)聲明和普通參數(shù)。例如，當(dāng)一個(gè)函數(shù)在自身函數(shù)體內(nèi)需要引用一個(gè)變量，但是這個(gè)變量并沒(méi)有在函數(shù)內(nèi)部聲明（或者也不是某個(gè)參數(shù)名），那么這個(gè)變量就可以稱(chēng)為自由變量[free variable]。那么我們搜尋這些自由變量就需要用到作用域鏈。
在一般情況下，一個(gè)作用域鏈包括父級(jí)變量對(duì)象（variable object）（作用域鏈的頂部）、函數(shù)自身變量VO和活動(dòng)對(duì)象（activation object）。不過(guò)，有些情況下也會(huì)包含其它的對(duì)象，例如在執(zhí)行期間，動(dòng)態(tài)加入作用域鏈中的—例如with或者catch語(yǔ)句。[譯注：with-objects指的是with語(yǔ)句，產(chǎn)生的臨時(shí)作用域?qū)ο?；catch-clauses指的是catch從句，如catch(e)，這會(huì)產(chǎn)生異常對(duì)象，導(dǎo)致作用域變更]。
當(dāng)查找標(biāo)識(shí)符的時(shí)候，會(huì)從作用域鏈的活動(dòng)對(duì)象部分開(kāi)始查找，然后(如果標(biāo)識(shí)符沒(méi)有在活動(dòng)對(duì)象中找到)查找作用域鏈的頂部，循環(huán)往復(fù)，就像作用域鏈那樣。
var x = 10;
(function foo() {
var y = 20;
(function bar() {
var z = 30;
// "x"和"y"是自由變量
// 會(huì)在作用域鏈的下一個(gè)對(duì)象中找到（函數(shù)”bar”的互動(dòng)對(duì)象之后）
console.log(x + y + z);
})();
})();
我們假設(shè)作用域鏈的對(duì)象聯(lián)動(dòng)是通過(guò)一個(gè)叫做__parent__的屬性，它是指向作用域鏈的下一個(gè)對(duì)象。這可以在Rhino Code中測(cè)試一下這種流程，這種技術(shù)也確實(shí)在ES5環(huán)境中實(shí)現(xiàn)了(有一個(gè)稱(chēng)為outer鏈接).當(dāng)然也可以用一個(gè)簡(jiǎn)單的數(shù)據(jù)來(lái)模擬這個(gè)模型。使用__parent__的概念，我們可以把上面的代碼演示成如下的情況。（因此，父級(jí)變量是被存在函數(shù)的[[Scope]]屬性中的）。
圖 9. 作用域鏈
在代碼執(zhí)行過(guò)程中，如果使用with或者catch語(yǔ)句就會(huì)改變作用域鏈。而這些對(duì)象都是一些簡(jiǎn)單對(duì)象，他們也會(huì)有原型鏈。這樣的話(huà)，作用域鏈會(huì)從兩個(gè)維度來(lái)搜尋。
- 首先在原本的作用域鏈
- 每一個(gè)鏈接點(diǎn)的作用域的鏈（如果這個(gè)鏈接點(diǎn)是有prototype的話(huà)）
我們?cè)倏聪旅孢@個(gè)例子：
Object.prototype.x = 10;
var w = 20;
var y = 30;
// 在SpiderMonkey全局對(duì)象里
// 例如，全局上下文的變量對(duì)象是從"Object.prototype"繼承到的
// 所以我們可以得到“沒(méi)有聲明的全局變量”
// 因?yàn)榭梢詮脑玩溨蝎@取
console.log(x); // 10
(function foo() {
// "foo" 是局部變量
var w = 40;
var x = 100;
// "x" 可以從"Object.prototype"得到，注意值是10哦
// 因?yàn)閧z: 50}是從它那里繼承的
with ({z: 50}) {
console.log(w, x, y , z); // 40, 10, 30, 50
}
// 在"with"對(duì)象從作用域鏈刪除之后
// x又可以從foo的上下文中得到了，注意這次值又回到了100哦
// "w" 也是局部變量
console.log(x, w); // 100, 40
// 在瀏覽器里
// 我們可以通過(guò)如下語(yǔ)句來(lái)得到全局的w值
console.log(window.w); // 20
})();
我們就會(huì)有如下結(jié)構(gòu)圖示。這表示，在我們?nèi)ニ褜_parent__之前，首先會(huì)去__proto__的鏈接中。
圖 10. with增大的作用域鏈
注意，不是所有的全局對(duì)象都是由Object.prototype繼承而來(lái)的。上述圖示的情況可以在SpiderMonkey中測(cè)試。
只要所有外部函數(shù)的變量對(duì)象都存在，那么從內(nèi)部函數(shù)引用外部數(shù)據(jù)則沒(méi)有特別之處——我們只要遍歷作用域鏈表，查找所需變量。然而，如上文所提及，當(dāng)一個(gè)上下文終止之后，其狀態(tài)與自身將會(huì)被 銷(xiāo)毀(destroyed) ，同時(shí)內(nèi)部函數(shù)將會(huì)從外部函數(shù)中返回。此外，這個(gè)返回的函數(shù)之后可能會(huì)在其他的上下文中被激活，那么如果一個(gè)之前被終止的含有一些自由變量的上下文又被激活將會(huì)怎樣?通常來(lái)說(shuō)，解決這個(gè)問(wèn)題的概念在ECMAScript中與作用域鏈直接相關(guān)，被稱(chēng)為 (詞法)閉包((lexical) closure)。
閉包(Closures)
在ECMAScript中，函數(shù)是“第一類(lèi)”對(duì)象。這個(gè)名詞意味著函數(shù)可以作為參數(shù)被傳遞給其他函數(shù)使用 (在這種情況下，函數(shù)被稱(chēng)為“funargs”——“functional arguments”的縮寫(xiě)[譯注：這里不知翻譯為泛函參數(shù)是否恰當(dāng)])。接收“funargs”的函數(shù)被稱(chēng)之為 高階函數(shù)(higher-order functions) ，或者更接近數(shù)學(xué)概念的話(huà)，被稱(chēng)為 運(yùn)算符(operators) 。其他函數(shù)的運(yùn)行時(shí)也會(huì)返回函數(shù)，這些返回的函數(shù)被稱(chēng)為 function valued 函數(shù) (有 functional value 的函數(shù))。
“funargs”與“functional values”有兩個(gè)概念上的問(wèn)題，這兩個(gè)子問(wèn)題被稱(chēng)為“Funarg problem” (“泛函參數(shù)問(wèn)題”)。要準(zhǔn)確解決泛函參數(shù)問(wèn)題，需要引入 閉包(closures) 到的概念。讓我們仔細(xì)描述這兩個(gè)問(wèn)題(我們可以見(jiàn)到，在ECMAScript中使用了函數(shù)的[[Scope]]屬性來(lái)解決這個(gè)問(wèn)題)。
“funarg problem”的一個(gè)子問(wèn)題是“upward funarg problem”[譯注：或許可以翻譯為：向上查找的函數(shù)參數(shù)問(wèn)題]。當(dāng)一個(gè)函數(shù)從其他函數(shù)返回到外部的時(shí)候，這個(gè)問(wèn)題將會(huì)出現(xiàn)。要能夠在外部上下文結(jié)束時(shí)，進(jìn)入外部上下文的變量，內(nèi)部函數(shù) 在創(chuàng)建的時(shí)候(at creation moment) 需要將之存儲(chǔ)進(jìn)[[Scope]]屬性的父元素的作用域中。然后當(dāng)函數(shù)被激活時(shí)，上下文的作用域鏈表現(xiàn)為激活對(duì)象與[[Scope]]屬性的組合(事實(shí)上，可以在上圖見(jiàn)到)：
Scope chain = Activation object + [[Scope]]
作用域鏈 = 活動(dòng)對(duì)象 + [[Scope]]
請(qǐng)注意，最主要的事情是——函數(shù)在被創(chuàng)建時(shí)保存外部作用域，是因?yàn)檫@個(gè) 被保存的作用域鏈(saved scope chain) 將會(huì)在未來(lái)的函數(shù)調(diào)用中用于變量查找。
function foo() {
var x = 10;
return function bar() {
console.log(x);
};
}
// "foo"返回的也是一個(gè)function
// 并且這個(gè)返回的function可以隨意使用內(nèi)部的變量x
var returnedFunction = foo();
// 全局變量 "x"
var x = 20;
// 支持返回的function
returnedFunction(); // 結(jié)果是10而不是20
這種形式的作用域稱(chēng)為靜態(tài)作用域[static/lexical scope]。上面的x變量就是在函數(shù)bar的[[Scope]]中搜尋到的。理論上來(lái)說(shuō)，也會(huì)有動(dòng)態(tài)作用域[dynamic scope], 也就是上述的x被解釋為20，而不是10. 但是EMCAScript不使用動(dòng)態(tài)作用域。
“funarg problem”的另一個(gè)類(lèi)型就是自上而下[”downward funarg problem”].在這種情況下，父級(jí)的上下會(huì)存在，但是在判斷一個(gè)變量值的時(shí)候會(huì)有多義性。也就是，這個(gè)變量究竟應(yīng)該使用哪個(gè)作用域。是在函數(shù)創(chuàng)建時(shí)的作用域呢，還是在執(zhí)行時(shí)的作用域呢？為了避免這種多義性，可以采用閉包，也就是使用靜態(tài)作用域。
請(qǐng)看下面的例子：
// 全局變量 "x"
var x = 10;
// 全局function
function foo() {
console.log(x);
}
(function (funArg) {
// 局部變量 "x"
var x = 20;
// 這不會(huì)有歧義
// 因?yàn)槲覀兪褂?foo"函數(shù)的[[Scope]]里保存的全局變量"x",
// 并不是caller作用域的"x"
funArg(); // 10, 而不是20
})(foo); // 將foo作為一個(gè)"funarg"傳遞下去
從上述的情況，我們似乎可以斷定，在語(yǔ)言中，使用靜態(tài)作用域是閉包的一個(gè)強(qiáng)制性要求。不過(guò)，在某些語(yǔ)言中，會(huì)提供動(dòng)態(tài)和靜態(tài)作用域的結(jié)合，可以允許開(kāi)發(fā)員選擇哪一種作用域。但是在ECMAScript中，只采用了靜態(tài)作用域。所以ECMAScript完全支持使用[[Scope]]的屬性。我們可以給閉包得出如下定義：
A closure is a combination of a code block (in ECMAScript this is a function) and statically/lexically saved all parent scopes.
Thus, via these saved scopes a function may easily refer free variables.
閉包是一系列代碼塊（在ECMAScript中是函數(shù)），并且靜態(tài)保存所有父級(jí)的作用域。通過(guò)這些保存的作用域來(lái)搜尋到函數(shù)中的自由變量。
復(fù)制代碼
請(qǐng)注意，因?yàn)槊恳粋€(gè)普通函數(shù)在創(chuàng)建時(shí)保存了[[Scope]]，理論上，ECMAScript中所有函數(shù)都是閉包。
還有一個(gè)很重要的點(diǎn)，幾個(gè)函數(shù)可能含有相同的父級(jí)作用域（這是一個(gè)很普遍的情況，例如有好幾個(gè)內(nèi)部或者全局的函數(shù)）。在這種情況下，在[[Scope]]中存在的變量是會(huì)共享的。一個(gè)閉包中變量的變化，也會(huì)影響另一個(gè)閉包的。
function baz() {
var x = 1;
return {
foo: function foo() { return ++x; },
bar: function bar() { return --x; }
};
}
var closures = baz();
console.log(
closures.foo(), // 2
closures.bar() // 1
);
上述代碼可以用這張圖來(lái)表示：
圖 11. 共享的[[Scope]]
在某個(gè)循環(huán)中創(chuàng)建多個(gè)函數(shù)時(shí)，上圖會(huì)引發(fā)一個(gè)困惑。如果在創(chuàng)建的函數(shù)中使用循環(huán)變量(如”k”)，那么所有的函數(shù)都使用同樣的循環(huán)變量，導(dǎo)致一些程序員經(jīng)常會(huì)得不到預(yù)期值?，F(xiàn)在清楚為什么會(huì)產(chǎn)生如此問(wèn)題了——因?yàn)樗泻瘮?shù)共享同一個(gè)[[Scope]]，其中循環(huán)變量為最后一次復(fù)賦值。
var data = [];
for (var k = 0; k < 3; k++) {
data[k] = function () {
alert(k);
};
}
data[0](); // 3, but not 0
data[1](); // 3, but not 1
data[2](); // 3, but not 2
有一些用以解決這類(lèi)問(wèn)題的技術(shù)。其中一種技巧是在作用域鏈中提供一個(gè)額外的對(duì)象，比如增加一個(gè)函數(shù)：
var data = [];
for (var k = 0; k < 3; k++) {
data[k] = (function (x) {
return function () {
alert(x);
};
})(k); // 將k當(dāng)做參數(shù)傳遞進(jìn)去
}
// 結(jié)果正確
data[0](); // 0
data[1](); // 1
data[2](); // 2
閉包理論的深入研究與具體實(shí)踐可以在本系列教程第16章閉包(Closures)中找到。如果想得到關(guān)于作用域鏈的更多信息，可以參照本系列教程第14章作用域鏈(Scope chain)。
下一章節(jié)將會(huì)討論一個(gè)執(zhí)行上下文的最后一個(gè)屬性——this指針的概念。
This指針
A this value is a special object which is related with the execution context.
Therefore, it may be named as a context object (i.e. an object in which context the execution context is activated).
this適合執(zhí)行的上下文環(huán)境息息相關(guān)的一個(gè)特殊對(duì)象。因此，它也可以稱(chēng)為上下文對(duì)象[context object](激活執(zhí)行上下文的上下文)。
復(fù)制代碼
任何對(duì)象都可以作為上下文的this值。我想再次澄清對(duì)與ECMAScript中，與執(zhí)行上下文相關(guān)的一些描述——特別是this的誤解。通常，this 被錯(cuò)誤地，描述為變量對(duì)象的屬性。最近比如在這本書(shū)中就發(fā)現(xiàn)了(盡管書(shū)中提及this的那一章還不錯(cuò))。 請(qǐng)牢記：
a this value is a property of the execution context, but not a property of the variable object.
this是執(zhí)行上下文環(huán)境的一個(gè)屬性，而不是某個(gè)變量對(duì)象的屬性
復(fù)制代碼
這個(gè)特點(diǎn)很重要，因?yàn)楹妥兞坎煌?，this是沒(méi)有一個(gè)類(lèi)似搜尋變量的過(guò)程。當(dāng)你在代碼中使用了this,這個(gè) this的值就直接從執(zhí)行的上下文中獲取了，而不會(huì)從作用域鏈中搜尋。this的值只取決中進(jìn)入上下文時(shí)的情況。
順便說(shuō)一句，和ECMAScript不同，Python有一個(gè)self的參數(shù)，和this的情況差不多，但是可以在執(zhí)行過(guò)程中被改變。在ECMAScript中，是不可以給this賦值的，因?yàn)?，還是那句話(huà)，this不是變量。
在global context(全局上下文)中，this的值就是指全局這個(gè)對(duì)象，這就意味著，this值就是這個(gè)變量本身。
var x = 10;
console.log(
x, // 10
this.x, // 10
window.x // 10
);
在函數(shù)上下文[function context]中，this會(huì)可能會(huì)根據(jù)每次的函數(shù)調(diào)用而成為不同的值.this會(huì)由每一次caller提供,caller是通過(guò)調(diào)用表達(dá)式[call expression]產(chǎn)生的（也就是這個(gè)函數(shù)如何被激活調(diào)用的）。例如，下面的例子中foo就是一個(gè)callee，在全局上下文中被激活。下面的例子就表明了不同的caller引起this的不同。
// "foo"函數(shù)里的alert沒(méi)有改變
// 但每次激活調(diào)用的時(shí)候this是不同的
function foo() {
alert(this);
}
// caller 激活 "foo"這個(gè)callee，
// 并且提供"this"給這個(gè) callee
foo(); // 全局對(duì)象
foo.prototype.constructor(); // foo.prototype
var bar = {
baz: foo
};
bar.baz(); // bar
(bar.baz)(); // also bar
(bar.baz = bar.baz)(); // 這是一個(gè)全局對(duì)象
(bar.baz, bar.baz)(); // 也是全局對(duì)象
(false || bar.baz)(); // 也是全局對(duì)象
var otherFoo = bar.baz;
otherFoo(); // 還是全局對(duì)象
如果要深入思考每一次函數(shù)調(diào)用中，this值的變化(更重要的是怎樣變化)，你可以閱讀本系列教程第10章This。上文所提及的情況都會(huì)在此章內(nèi)詳細(xì)討論。
總結(jié)(Conclusion)
在此我們完成了一個(gè)簡(jiǎn)短的概述。盡管看來(lái)不是那么簡(jiǎn)短，但是這些話(huà)題若要完整表述完畢，則需要一整本書(shū)。.我們沒(méi)有提及兩個(gè)重要話(huà)題：函數(shù)(functions) (以及不同類(lèi)型的函數(shù)之間的不同，比如函數(shù)聲明與函數(shù)表達(dá)式)與ECMAScript的 求值策略(evaluation strategy) 。這兩個(gè)話(huà)題可以分別查閱本系列教程第15章函數(shù)(Functions) 與第19章求值策略(Evaluation strategy)。
如果你有任何評(píng)論，問(wèn)題或者補(bǔ)充，我很歡迎在文章評(píng)論中討論。
祝大家學(xué)習(xí)ECMAScript順利。
相關(guān)文章
在網(wǎng)上找了好多隨機(jī)產(chǎn)生的密碼的代碼，沒(méi)一個(gè)好用的，所以就隨便寫(xiě)了一個(gè)2010-08-08
js canvas實(shí)現(xiàn)擦除動(dòng)畫(huà)
在移動(dòng)設(shè)備上將某張圖片擦掉顯示另一張圖片，利用canvas來(lái)實(shí)現(xiàn)這篇文章就為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)擦除動(dòng)畫(huà)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07
javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法
這篇文章主要為大家詳細(xì)介紹了javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱(chēng)數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開(kāi)內(nèi)容,需要的朋友可以參考一下2021-12-12
Electron 使? electron-builder 打包應(yīng)用過(guò)程詳解
Electron應(yīng)用開(kāi)發(fā)中,electron-builder是一個(gè)常用的打包工具,提供了多種自定義配置,不過(guò),使用npm安裝electron-builder時(shí)可能會(huì)遇到下載依賴(lài)慢或失敗的問(wèn)題,本文給大家介紹Electron 使? electron-builder 打包應(yīng)用的相關(guān)操作,感興趣的朋友一起看看吧2024-10-10
javascript之對(duì)系統(tǒng)的toFixed()方法的修正
javascript之對(duì)系統(tǒng)的toFixed()方法的修正...2007-05-05
這篇文章主要介紹了swipe使用及豎屏頁(yè)面滾動(dòng)方法，本文通過(guò)實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2018-06-06
Ajax::prototype 源碼解讀...2007-01-01
微信小程序?qū)崿F(xiàn)類(lèi)似微信點(diǎn)擊語(yǔ)音播放效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)類(lèi)似微信點(diǎn)擊語(yǔ)音播放效果，不會(huì)互相干擾播放狀態(tài)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
本文主要分享了原生js實(shí)現(xiàn)仿慕課網(wǎng)的輪播效果。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02