摘要：在這個情況下我們可能需要使用構(gòu)造函數(shù)，其以指定的模式來創(chuàng)造對象。構(gòu)造函數(shù)也有自己的，值為，也通過其屬性關(guān)聯(lián)到。從邏輯上來說，這是以棧的形式實(shí)現(xiàn)的，它叫作執(zhí)行上下文棧。

原文：http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

對象

原型鏈

構(gòu)造函數(shù)

執(zhí)行上下文棧

執(zhí)行上下文

變量對象

活動對象

作用域鏈

閉包

This

總結(jié)

這篇文章是「深入ECMA-262-3」系列的一個概覽和摘要。每個部分都包含了對應(yīng)章節(jié)的鏈接，所以你可以閱讀它們以便對其有更深的理解。

面向讀者：經(jīng)驗(yàn)豐富的程序員，專家。

我們以思考對象的概念做為開始，這是ECMAScript的基礎(chǔ)。

ECMAScript做為一個高度抽象的面向?qū)ο笳Z言，是通過對象來交互的。即使ECMAScript里邊也有基本類型，但是，當(dāng)需要的時候，它們也會被轉(zhuǎn)換成對象。

一個對象就是一個屬性集合，并擁有一個獨(dú)立的prototype（原型）對象。這個prototype可以是一個對象或者null。

讓我們看一個關(guān)于對象的基本例子。一個對象的prototype是以內(nèi)部的[[Prototype]]屬性來引用的。但是，在示意圖里邊我們將會使用____下劃線標(biāo)記來替代兩個括號，對于prototype對象來說是：__proto__。

對于以下代碼：

var foo = {
  x: 10,
  y: 20
};

我們擁有一個這樣的結(jié)構(gòu)，兩個明顯的自身屬性和一個隱含的__proto__屬性，這個屬性是對foo原型對象的引用：

這些prototype有什么用？讓我們以原型鏈（prototype chain）的概念來回答這個問題。

原型對象也是簡單的對象并且可以擁有它們自己的原型。如果一個原型對象的原型是一個非null的引用，那么以此類推，這就叫作原型鏈。

原型鏈?zhǔn)且粋€用來實(shí)現(xiàn)繼承和共享屬性的有限對象鏈。

考慮這么一個情況，我們擁有兩個對象，它們之間只有一小部分不同，其他部分都相同。顯然，對于一個設(shè)計良好的系統(tǒng)，我們將會重用相似的功能/代碼，而不是在每個多帶帶的對象中重復(fù)它。在基于類的系統(tǒng)中，這個代碼重用風(fēng)格叫作類繼承－你把相似的功能放入類 A中，然后類 B和類 C繼承類 A，并且擁有它們自己的一些小的額外變動。

ECMAScript中沒有類的概念。但是，代碼重用的風(fēng)格并沒有太多不同（盡管從某些方面來說比基于類（class-based）的方式要更加靈活）并且通過原型鏈來實(shí)現(xiàn)。這種繼承方式叫作委托繼承(delegation based inheritance)（或者，更貼近ECMAScript一些，叫作原型繼承(prototype based inheritance)）。

跟例子中的類A，B，C相似，在ECMAScript中你創(chuàng)建對象：a，b，c。于是，對象a中存儲對象b和c中通用的部分。然后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
};

// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

足夠簡單，是不是？我們看到b和c訪問到了在對象a中定義的calculate方法。這是通過原型鏈實(shí)現(xiàn)的。

規(guī)則很簡單：如果一個屬性或者一個方法在對象自身中無法找到（也就是對象自身沒有一個那樣的屬性），然后它會嘗試在原型鏈中尋找這個屬性/方法。如果這個屬性在原型中沒有查找到，那么將會查找這個原型的原型，以此類推，遍歷整個原型鏈（當(dāng)然這在類繼承中也是一樣的，當(dāng)解析一個繼承的方法的時候－我們遍歷class鏈（ class chain））。第一個被查找到的同名屬性/方法會被使用。因此，一個被查找到的屬性叫作繼承屬性。如果在遍歷了整個原型鏈之后還是沒有查找到這個屬性的話，返回undefined值。

注意，繼承方法中所使用的this的值被設(shè)置為原始對象，而并不是在其中查找到這個方法的（原型）對象。也就是，在上面的例子中this.y取的是b和c中的值，而不是a中的值。但是，this.x是取的是a中的值，并且又一次通過原型鏈機(jī)制完成。

如果沒有明確為一個對象指定原型，那么它將會使用__proto__的默認(rèn)值－Object.prototype。Object.prototype對象自身也有一個__proto__屬性，這是原型鏈的終點(diǎn)并且值為null。

下一張圖展示了對象a，b，c之間的繼承層級：

注意：
ES5標(biāo)準(zhǔn)化了一個實(shí)現(xiàn)原型繼承的可選方法，即使用Object.create函數(shù)：

var b = Object.create(a, {y: {value: 20}});
var c = Object.create(a, {y: {value: 30}});

你可以在對應(yīng)的章節(jié)獲取到更多關(guān)于ES5新API的信息。
ES6標(biāo)準(zhǔn)化了 __proto__屬性，并且可以在對象初始化的時候使用它。

通常情況下需要對象擁有相同或者相似的狀態(tài)結(jié)構(gòu)（也就是相同的屬性集合），賦以不同的狀態(tài)值。在這個情況下我們可能需要使用構(gòu)造函數(shù)(constructor function)，其以指定的模式來創(chuàng)造對象。

除了以指定模式創(chuàng)建對象之外，構(gòu)造函數(shù)也做了另一個有用的事情－它自動地為新創(chuàng)建的對象設(shè)置一個原型對象。這個原型對象存儲在ConstructorFunction.prototype屬性中。

換句話說，我們可以使用構(gòu)造函數(shù)來重寫上一個擁有對象b和對象c的例子。因此，對象a（一個原型對象）的角色由Foo.prototype來扮演：

// a constructor function
function Foo(y) {
  // which may create objects
  // by specified pattern: they have after
  // creation own "y" property
  this.y = y;
}

// also "Foo.prototype" stores reference
// to the prototype of newly created objects,
// so we may use it to define shared/inherited
// properties or methods, so the same as in
// previous example we have:

// inherited property "x"
Foo.prototype.x = 10;

// and inherited method "calculate"
Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};

// now create our "b" and "c"
// objects using "pattern" Foo
var b = new Foo(20);
var c = new Foo(30);

// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

// let"s show that we reference
// properties we expect

console.log(

  b.__proto__ === Foo.prototype, // true
  c.__proto__ === Foo.prototype, // true

  // also "Foo.prototype" automatically creates
  // a special property "constructor", which is a
  // reference to the constructor function itself;
  // instances "b" and "c" may found it via
  // delegation and use to check their constructor

  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)系：

這張圖又一次說明了每個對象都有一個原型。構(gòu)造函數(shù)Foo也有自己的__proto__，值為Function.prototype，Function.prototype也通過其__proto__屬性關(guān)聯(lián)到Object.prototype。因此，重申一下，Foo.prototype就是Foo的一個明確的屬性，指向?qū)ο?b>b和對象c的原型。

正式來說，如果思考一下分類的概念（并且我們已經(jīng)對Foo進(jìn)行了分類），那么構(gòu)造函數(shù)和原型對象合在一起可以叫作「類」。實(shí)際上，舉個例子，Python的第一級（first-class）動態(tài)類（dynamic classes）顯然是以同樣的屬性/方法處理方案來實(shí)現(xiàn)的。從這個角度來說，Python中的類就是ECMAScript使用的委托繼承的一個語法糖。

注意: 在ES6中「類」的概念被標(biāo)準(zhǔn)化了，并且實(shí)際上以一種構(gòu)建在構(gòu)造函數(shù)上面的語法糖來實(shí)現(xiàn)，就像上面描述的一樣。從這個角度來看原型鏈成為了類繼承的一種具體實(shí)現(xiàn)方式：

// ES6
class Foo {
  constructor(name) {
    this._name = name;
  }

  getName() {
    return this._name;
  }
}

class Bar extends Foo {
  getName() {
    return super.getName() + " Doe";
  }
}

var bar = new Bar("John");
console.log(bar.getName()); // John Doe

有關(guān)這個主題的完整、詳細(xì)的解釋可以在ES3系列的第七章找到。分為兩個部分：7.1 面向?qū)ο?基本理論，在那里你將會找到對各種面向?qū)ο蠓独L(fēng)格的描述以及它們和ECMAScript之間的對比，然后在7.2 面向?qū)ο?ECMAScript實(shí)現(xiàn)，是對ECMAScript中面向?qū)ο蟮慕榻B。

現(xiàn)在，在我們知道了對象的基礎(chǔ)之后，讓我們看看運(yùn)行時程序的執(zhí)行（runtime program execution）在ECMAScript中是如何實(shí)現(xiàn)的。這叫作執(zhí)行上下文棧（execution context stack），其中的每個元素也可以抽象成為一個對象。是的，ECMAScript幾乎在任何地方都和對象的概念打交道;)

這里有三種類型的ECMAScript代碼：全局代碼、函數(shù)代碼和eval代碼。每個代碼是在其執(zhí)行上下文（execution context）中被求值的。這里只有一個全局上下文，可能有多個函數(shù)執(zhí)行上下文以及eval執(zhí)行上下文。對一個函數(shù)的每次調(diào)用，會進(jìn)入到函數(shù)執(zhí)行上下文中，并對函數(shù)代碼類型進(jìn)行求值。每次對eval函數(shù)進(jìn)行調(diào)用，會進(jìn)入eval執(zhí)行上下文并對其代碼進(jìn)行求值。

注意，一個函數(shù)可能會創(chuàng)建無數(shù)的上下文，因?yàn)閷瘮?shù)的每次調(diào)用（即使這個函數(shù)遞歸的調(diào)用自己）都會生成一個具有新狀態(tài)的上下文：

function foo(bar) {}

// call the same function,
// generate three different
// contexts in each call, with
// different context state (e.g. value
// of the "bar" argument)

foo(10);
foo(20);
foo(30);

一個執(zhí)行上下文可能會觸發(fā)另一個上下文，比如，一個函數(shù)調(diào)用另一個函數(shù)（或者在全局上下文中調(diào)用一個全局函數(shù)），等等。從邏輯上來說，這是以棧的形式實(shí)現(xiàn)的，它叫作執(zhí)行上下文棧。

一個觸發(fā)其他上下文的上下文叫作caller。被觸發(fā)的上下文叫作callee。callee在同一時間可能是一些其他callee的caller（比如，一個在全局上下文中被調(diào)用的函數(shù)，之后調(diào)用了一些內(nèi)部函數(shù)）。

當(dāng)一個caller觸發(fā)（調(diào)用）了一個callee，這個caller會暫緩自身的執(zhí)行，然后把控制權(quán)傳遞給callee。這個callee被push到棧中，并成為一個運(yùn)行中（活動的）執(zhí)行上下文。在callee的上下文結(jié)束后，它會把控制權(quán)返回給caller，然后caller的上下文繼續(xù)執(zhí)行（它可能觸發(fā)其他上下文）直到它結(jié)束，以此類推。callee可能簡單的返回或者由于異常而退出。一個拋出的但是沒有被捕獲的異?？赡芡顺觯◤臈Ｖ衟op）一個或者多個上下文。

換句話說，所有ECMAScript_程序的運(yùn)行時可以用執(zhí)行上下文（EC）棧來表示，棧頂是當(dāng)前活躍_(active)上下文：

當(dāng)程序開始的時候它會進(jìn)入全局執(zhí)行上下文，此上下文位于棧底并且是棧中的第一個元素。然后全局代碼進(jìn)行一些初始化，創(chuàng)建需要的對象和函數(shù)。在全局上下文的執(zhí)行過程中，它的代碼可能觸發(fā)其他（已經(jīng)創(chuàng)建完成的）函數(shù)，這些函數(shù)將會進(jìn)入它們自己的執(zhí)行上下文，向棧中push新的元素，以此類推。當(dāng)初始化完成之后，運(yùn)行時系統(tǒng)（runtime system）就會等待一些事件（比如，用戶鼠標(biāo)點(diǎn)擊），這些事件將會觸發(fā)一些函數(shù)，從而進(jìn)入新的執(zhí)行上下文中。

在下個圖中，擁有一些函數(shù)上下文EC1和全局上下文Global EC，當(dāng)EC1進(jìn)入和退出全局上下文的時候下面的棧將會發(fā)生變化：

這就是ECMAScript的運(yùn)行時系統(tǒng)如何真正地管理代碼執(zhí)行的。

更多有關(guān)ECMAScript中執(zhí)行上下文的信息可以在對應(yīng)的第一章 執(zhí)行上下文中獲取。

像我們所說的，棧中的每個執(zhí)行上下文都可以用一個對象來表示。讓我們來看看它的結(jié)構(gòu)以及一個上下文到底需要什么狀態(tài)（什么屬性）來執(zhí)行它的代碼。

一個執(zhí)行上下文可以抽象的表示為一個簡單的對象。每一個執(zhí)行上下文擁有一些屬性（可以叫作上下文狀態(tài)）用來跟蹤和它相關(guān)的代碼的執(zhí)行過程。在下圖中展示了一個上下文的結(jié)構(gòu)：

除了這三個必需的屬性（一個變量對象（variable objec），一個this值以及一個作用域鏈（scope chain））之外，執(zhí)行上下文可以擁有任何附加的狀態(tài)，這取決于實(shí)現(xiàn)。

讓我們詳細(xì)看看上下文中的這些重要的屬性。

變量對象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域。它是一個與上下文相關(guān)的特殊對象，其中存儲了在上下文中定義的變量和函數(shù)聲明。

注意，函數(shù)表達(dá)式（與函數(shù)聲明相對）不包含在變量對象之中。

變量對象是一個抽象概念。對于不同的上下文類型，在物理上，是使用不同的對象。比如，在全局上下文中變量對象就是全局對象本身（這就是為什么我們可以通過全局對象的屬性名來關(guān)聯(lián)全局變量）。

讓我們在全局執(zhí)行上下文中考慮下面這個例子：

var foo = 10;

function bar() {} // function declaration, FD
(function baz() {}); // function expression, FE

console.log(
  this.foo == foo, // true
  window.bar == bar // true
);

console.log(baz); // ReferenceError, "baz" is not defined

之后，全局上下文的變量對象（variable objec，簡稱VO）將會擁有如下屬性：

再看一遍，函數(shù)baz是一個函數(shù)表達(dá)式，沒有被包含在變量對象之中。這就是為什么當(dāng)我們想要在函數(shù)自身之外訪問它的時候會出現(xiàn)ReferenceError。

注意，與其他語言（比如C/C++）相比，在ECMAScript中只有函數(shù)可以創(chuàng)建一個新的作用域。在函數(shù)作用域中所定義的變量和內(nèi)部函數(shù)在函數(shù)外邊是不能直接訪問到的，而且并不會污染全局變量對象。

使用eval我們也會進(jìn)入一個新的（eval類型）執(zhí)行上下文。無論如何，eval使用全局的變量對象或者使用caller（比如eval被調(diào)用時所在的函數(shù)）的變量對象。

那么函數(shù)和它的變量對象是怎么樣的？在函數(shù)上下文中，變量對象是以活動對象（activation object）來表示的。

當(dāng)一個函數(shù)被caller所觸發(fā)（被調(diào)用），一個特殊的對象，叫作活動對象（activation object）將會被創(chuàng)建。這個對象中包含形參和那個特殊的arguments對象（是對形參的一個映射，但是值是通過索引來獲取）。活動對象之后會做為函數(shù)上下文的變量對象來使用。

換句話說，函數(shù)的變量對象也是一個同樣簡單的變量對象，但是除了變量和函數(shù)聲明之外，它還存儲了形參和arguments對象，并叫作活動對象。

考慮如下例子：

function foo(x, y) {
  var z = 30;
  function bar() {} // FD
  (function baz() {}); // FE
}

foo(10, 20);

我們看下函數(shù)foo的上下文中的活動對象（activation object，簡稱AO）：

并且_函數(shù)表達(dá)式_baz還是沒有被包含在變量/活動對象中。

關(guān)于這個主題所有細(xì)節(jié)方面（像變量和函數(shù)聲明的提升問題（hoisting））的完整描述可以在同名的章節(jié)第二章 變量對象中找到。

注意，在ES5中變量對象和活動對象被并入了詞法環(huán)境模型（lexical environments model），詳細(xì)的描述可以在對應(yīng)的章節(jié)找到。

然后我們向下一個部分前進(jìn)。眾所周知，在ECMAScript中我們可以使用內(nèi)部函數(shù)，然后在這些內(nèi)部函數(shù)我們可以引用父函數(shù)的變量或者全局上下文中的變量。當(dāng)我們把變量對象命名為上下文的作用域?qū)ο?/em>，與上面討論的原型鏈相似，這里有一個叫作作用域鏈的東西。

作用域鏈?zhǔn)且粋€對象列表，上下文代碼中出現(xiàn)的標(biāo)識符在這個列表中進(jìn)行查找。

var x = 10;

(function foo() {
  var y = 20;
  (function bar() {
    var z = 30;
    // "x" and "y" are "free variables"
    // and are found in the next (after
    // bar"s activation object) object
    // of the bar"s scope chain
    console.log(x + y + z);
  })();
})();

在代碼執(zhí)行過程中，作用域鏈可以通過使用with語句和catch從句對象來增強(qiáng)。并且由于這些對象是簡單的對象，它們可以擁有原型（和原型鏈）。這個事實(shí)導(dǎo)致作用域鏈查找變?yōu)?em>兩個維度：（1）首先是作用域鏈連接，然后（2）在每個作用域鏈連接上－深入作用域鏈連接的原型鏈（如果此連接擁有原型）。

對于這個例子：

Object.prototype.x = 10;

var w = 20;
var y = 30;

// in SpiderMonkey global object
// i.e. variable object of the global
// context inherits from "Object.prototype",
// so we may refer "not defined global
// variable x", which is found in
// the prototype chain

console.log(x); // 10

(function foo() {

  // "foo" local variables
  var w = 40;
  var x = 100;

  // "x" is found in the
  // "Object.prototype", because
  // {z: 50} inherits from it

  with ({z: 50}) {
    console.log(w, x, y , z); // 40, 10, 30, 50
  }

  // after "with" object is removed
  // from the scope chain, "x" is
  // again found in the AO of "foo" context;
  // variable "w" is also local
  console.log(x, w); // 100, 40

  // and that"s how we may refer
  // shadowed global "w" variable in
  // the browser host environment
  console.log(window.w); // 20

})();

我們可以給出如下的結(jié)構(gòu)（確切的說，在我們查找__parent__連接之前，首先查找__proto__鏈）：

注意，不是在所有的實(shí)現(xiàn)中全局對象都是繼承自Object.prototype。上圖中描述的行為（從全局上下文中引用「未定義」的變量x）可以在諸如SpiderMonkey引擎中進(jìn)行測試。

由于所有父變量對象都存在，所以在內(nèi)部函數(shù)中獲取父函數(shù)中的數(shù)據(jù)沒有什么特別－我們就是遍歷作用域鏈去解析（搜尋）需要的變量。就像我們上邊提及的，在一個上下文結(jié)束之后，它所有的狀態(tài)和它自身都會被銷毀。在同一時間父函數(shù)可能會返回一個內(nèi)部函數(shù)。而且，這個返回的函數(shù)之后可能在另一個上下文中被調(diào)用。如果自由變量的上下文已經(jīng)「消失」了，那么這樣的調(diào)用將會發(fā)生什么？通常來說，有一個概念可以幫助我們解決這個問題，叫作（詞法）閉包，其在ECMAScript中就是和作用域鏈的概念緊密相關(guān)的。

在ECMAScript中，函數(shù)是第一級（first-class）對象。這個術(shù)語意味著函數(shù)可以做為參數(shù)傳遞給其他函數(shù)（在那種情況下，這些參數(shù)叫作「函數(shù)類型參數(shù)」（funargs，是"functional arguments"的簡稱））。接收「函數(shù)類型參數(shù)」的函數(shù)叫作高階函數(shù)或者，貼近數(shù)學(xué)一些，叫作高階操作符。同樣函數(shù)也可以從其他函數(shù)中返回。返回其他函數(shù)的函數(shù)叫作以函數(shù)為值（function valued）的函數(shù)（或者叫作擁有函數(shù)類值的函數(shù)（functions with functional value））。

這有兩個在概念上與「函數(shù)類型參數(shù)（funargs）」和「函數(shù)類型值（functional　values）」相關(guān)的問題。并且這兩個子問題在"Funarg problem"（或者叫作"functional argument"問題）中很普遍。為了解決整個"funarg problem"，閉包（closure）的概念被創(chuàng)造了出來。我們詳細(xì)的描述一下這兩個子問題（我們將會看到這兩個問題在ECMAScript中都是使用圖中所提到的函數(shù)的[[Scope]]屬性來解決的）。

「funarg問題」的第一個子問題是「向上funarg問題」（upward funarg problem）。它會在當(dāng)一個函數(shù)從另一個函數(shù)向上返回（到外層）并且使用上面所提到的自由變量的時候出現(xiàn)。為了在即使父函數(shù)上下文結(jié)束的情況下也能訪問其中的變量，內(nèi)部函數(shù)在被創(chuàng)建的時候會在它的[[Scope]]屬性中保存父函數(shù)的作用域鏈。所以當(dāng)函數(shù)被調(diào)用的時候，它上下文的作用域鏈會被格式化成活動對象與[[Scope]]屬性的和（實(shí)際上就是我們剛剛在上圖中所看到的）：

Scope chain = Activation object + [[Scope]]

再次注意這個關(guān)鍵點(diǎn)－確切的說在創(chuàng)建時刻－函數(shù)會保存父函數(shù)的作用域鏈，因?yàn)榇_切的說這個保存下來的作用域鏈將會在未來的函數(shù)調(diào)用時用來查找變量。

function foo() {
  var x = 10;
  return function bar() {
    console.log(x);
  };
}

// "foo" returns also a function
// and this returned function uses
// free variable "x"

var returnedFunction = foo();

// global variable "x"
var x = 20;

// execution of the returned function

returnedFunction(); // 10, but not 20

這個類型的作用域叫作靜態(tài)（或者詞法）作用域。我們看到變量x在返回的bar函數(shù)的[[Scope]]屬性中被找到。通常來說，也存在動態(tài)作用域，那么上面例子中的變量x將會被解析成20，而不是10。但是，動態(tài)作用域在ECMAScript中沒有被使用。

「funarg問題」的第二個部分是「向下funarg問題」。這種情況下可能會存在一個父上下文，但是在解析標(biāo)識符的時候可能會模糊不清。問題是：標(biāo)識符該使用哪個作用域的值－以靜態(tài)的方式存儲在函數(shù)創(chuàng)建時刻的還是在執(zhí)行過程中以動態(tài)方式生成的（比如caller的作用域）？為了避免這種模棱兩可的情況并形成閉包，靜態(tài)作用域被采用：

// global "x"
var x = 10;

// global function
function foo() {
  console.log(x);
}

(function (funArg) {

  // local "x"
  var x = 20;

  // there is no ambiguity,
  // because we use global "x",
  // which was statically saved in
  // [[Scope]] of the "foo" function,
  // but not the "x" of the caller"s scope,
  // which activates the "funArg"

  funArg(); // 10, but not 20

})(foo); // pass "down" foo as a "funarg"

我們可以斷定靜態(tài)作用域是一門語言擁有閉包的必需條件。但是，一些語言可能會同時提供動態(tài)和靜態(tài)作用域，允許程序員做選擇－什么應(yīng)該包含（closure）在內(nèi)和什么不應(yīng)包含在內(nèi)。由于在ECMAScript中只使用了靜態(tài)作用域（比如我們對于funarg問題的兩個子問題都有解決方案），所以結(jié)論是：ECMAScript完全支持閉包，技術(shù)上是通過函數(shù)的[[Scope]]屬性實(shí)現(xiàn)的?，F(xiàn)在我們可以給閉包下一個準(zhǔn)確的定義：

閉包是一個代碼塊（在ECMAScript是一個函數(shù)）和以靜態(tài)方式/詞法方式進(jìn)行存儲的所有父作用域的一個集合體。所以，通過這些存儲的作用域，函數(shù)可以很容易的找到自由變量。

注意，由于每個（標(biāo)準(zhǔn)的）函數(shù)都在創(chuàng)建的時候保存了[[Scope]]，所以理論上來講，ECMAScript中的所有函數(shù)都是閉包。

另一個需要注意的重要事情是，多個函數(shù)可能擁有相同的父作用域（這是很常見的情況，比如當(dāng)我們擁有兩個內(nèi)部/全局函數(shù)的時候）。在這種情況下，[[Scope]]屬性中存儲的變量是在擁有相同父作用域鏈的所有函數(shù)之間共享的。一個閉包對變量進(jìn)行的修改會體現(xiàn)在另一個閉包對這些變量的讀取上：

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
);

以上代碼可以通過下圖進(jìn)行說明：

確切來說這個特性在循環(huán)中創(chuàng)建多個函數(shù)的時候會使人非常困惑。在創(chuàng)建的函數(shù)中使用循環(huán)計數(shù)器的時候，一些程序員經(jīng)常會得到非預(yù)期的結(jié)果，所有函數(shù)中的計數(shù)器都是同樣的值。現(xiàn)在是到了該揭開謎底的時候了－因?yàn)樗羞@些函數(shù)擁有同一個[[Scope]]，這個屬性中的循環(huán)計數(shù)器的值是最后一次所賦的值。

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

這里有幾種技術(shù)可以解決這個問題。其中一種是在作用域鏈中提供一個額外的對象－比如，使用額外函數(shù)：

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function (x) {
    return function () {
      alert(x);
    };
  })(k); // pass "k" value
}

// now it is correct
data[0](); // 0
data[1](); // 1
data[2](); // 2

對閉包理論和它們的實(shí)際應(yīng)用感興趣的同學(xué)可以在第六章 閉包中找到額外的信息。如果想獲取更多關(guān)于作用域鏈的信息，可以看一下同名的第四章 作用域鏈。

然后我們移動到下個部分，考慮一下執(zhí)行上下文的最后一個屬性。這就是關(guān)于this值的概念。

this是一個與執(zhí)行上下文相關(guān)的特殊對象。因此，它可以叫作上下文對象（也就是用來指明執(zhí)行上下文是在哪個上下文中被觸發(fā)的對象）。

任何對象都可以做為上下文中的this的值。我想再一次澄清，在一些對ECMAScript執(zhí)行上下文和部分this的描述中的所產(chǎn)生誤解。this經(jīng)常被錯誤的描述成是變量對象的一個屬性。這類錯誤存在于比如像這本書中（即使如此，這本書的相關(guān)章節(jié)還是十分不錯的）。再重復(fù)一次：

this是執(zhí)行上下文的一個屬性，而不是變量對象的一個屬性

這個特性非常重要，因?yàn)?em>與變量相反，this從不會參與到標(biāo)識符解析過程。換句話說，在代碼中當(dāng)訪問this的時候，它的值是直接從執(zhí)行上下文中獲取的，并不需要任何作用域鏈查找。this的值只在進(jìn)入上下文的時候進(jìn)行一次確定。

順便說一下，與ECMAScript相反，比如，Python的方法都會擁有一個被當(dāng)作簡單變量的self參數(shù)，這個變量的值在各個方法中是相同的的并且在執(zhí)行過程中可以被更改成其他值。在ECMAScript中，給this賦一個新值是不可能的，因?yàn)?，再重?fù)一遍，它不是一個變量并且不存在于變量對象中。

在全局上下文中，this就等于全局對象本身（這意味著，這里的this等于變量對象）：

var x = 10;

console.log(
  x, // 10
  this.x, // 10
  window.x // 10
);

在函數(shù)上下文的情況下，對函數(shù)的每次調(diào)用，其中的this值可能是不同的。這個this值是通過函數(shù)調(diào)用表達(dá)式（也就是函數(shù)被調(diào)用的方式）的形式由caller所提供的。舉個例子，下面的函數(shù)foo是一個callee，在全局上下文中被調(diào)用，此上下文為caller。讓我們通過例子看一下，對于一個代碼相同的函數(shù)，this值是如何在不同的調(diào)用中（函數(shù)觸發(fā)的不同方式），由caller給出不同的結(jié)果的：

// the code of the "foo" function
// never changes, but the "this" value
// differs in every activation

function foo() {
  alert(this);
}

// caller activates "foo" (callee) and
// provides "this" for the callee

foo(); // global object
foo.prototype.constructor(); // foo.prototype

var bar = {
  baz: foo
};

bar.baz(); // bar

(bar.baz)(); // also bar
(bar.baz = bar.baz)(); // but here is global object
(bar.baz, bar.baz)(); // also global object
(false || bar.baz)(); // also global object

var otherFoo = bar.baz;
otherFoo(); // again global object

為了深入理解this為什么（并且更本質(zhì)一些－如何）在每個函數(shù)調(diào)用中可能會發(fā)生變化，你可以閱讀第三章 This。在那里，上面所提到的情況都會有詳細(xì)的討論。

通過本文我們完成了對概要的綜述。盡管，它看起來并不像是「概要」;)。對所有這些主題進(jìn)行完全的解釋需要一本完整的書。我們只是沒有涉及到兩個大的主題：函數(shù)（和不同函數(shù)之間的區(qū)別，比如，函數(shù)聲明和函數(shù)表達(dá)式）和ECMAScript中所使用的求值策略(evaluation strategy )。這兩個主題是可以ES3系列的在對應(yīng)章節(jié)找到：第五章 函數(shù)和第八章 求值策略。

如果你有留言，問題或者補(bǔ)充，我將會很樂意地在評論中討論它們。

祝學(xué)習(xí)ECMAScript好運(yùn)！

作者：Dmitry A. Soshnikov
發(fā)布于：2010-09-02