本文嘗試闡述Javascript中的上下文與作用域背后的機(jī)制，主要涉及到執(zhí)行上下文（execution context）、作用域鏈（scope chain）、閉包（closure）、this等概念。

Execution context

執(zhí)行上下文（簡(jiǎn)稱上下文）決定了Js執(zhí)行過程中可以獲取哪些變量、函數(shù)、數(shù)據(jù)，一段程序可能被分割成許多不同的上下文，每一個(gè)上下文都會(huì)綁定一個(gè)變量對(duì)象（variable object），它就像一個(gè)容器，用來存儲(chǔ)當(dāng)前上下文中所有已定義或可獲取的變量、函數(shù)等。位于最頂端或最外層的上下文稱為全局上下文（global context），全局上下文取決于執(zhí)行環(huán)境，如Node中的global和Browser中的window：

需要注意的是，上下文與作用域（scope）是不同的概念。Js本身是單線程的，每當(dāng)有function被執(zhí)行時(shí)，就會(huì)產(chǎn)生一個(gè)新的上下文，這一上下文會(huì)被壓入Js的上下文堆棧（context stack）中，function執(zhí)行結(jié)束后則被彈出，因此Js解釋器總是在棧頂上下文中執(zhí)行。在生成新的上下文時(shí)，首先會(huì)綁定該上下文的變量對(duì)象，其中包括arguments和該函數(shù)中定義的變量；之后會(huì)創(chuàng)建屬于該上下文的作用域鏈（scope chain），最后將this賦予這一function所屬的Object，這一過程可以通過下圖表示：

this

上文提到this被賦予function所屬的Object，具體來說，當(dāng)function是定義在global對(duì)中時(shí)，this指向global；當(dāng)function作為Object的方法時(shí)，this指向該Object：

varx=1;varf=function(){console.log(this.x);}f();// -> 1varff=function(){this.x=2;console.log(this.x);}ff();// -> 2x// -> 2varo={x:"o's x",f:f};o.f();// "o's x"

Scope chain

上文提到，在function被執(zhí)行時(shí)生成新的上下文時(shí)會(huì)先綁定當(dāng)前上下文的變量對(duì)象，再創(chuàng)建作用域鏈。我們知道function的定義是可以嵌套在其他function所創(chuàng)建的上下文中，也可以并列地定義在同一個(gè)上下文中（如global）。作用域鏈實(shí)際上就是自下而上地將所有嵌套定義的上下文所綁定的變量對(duì)象串接到一起，使嵌套的function可以“繼承”上層上下文的變量，而并列的function之間互不干擾：

varx='global';functiona(){varx="a's x";functionb(){vary="b's y";console.log(x);};b();}functionc(){varx="c's x";functiond(){console.log(y);};d();}a();// -> "a's x"c();// -> ReferenceError: y is not definedx// -> "global"y// -> ReferenceError: y is not defined

Closure

如果理解了上文中提到的上下文與作用域鏈的機(jī)制，再來看閉包的概念就很清楚了。每個(gè)function在調(diào)用時(shí)會(huì)創(chuàng)建新的上下文及作用域鏈，而作用域鏈就是將外層（上層）上下文所綁定的變量對(duì)象逐一串連起來，使當(dāng)前function可以獲取外層上下文的變量、數(shù)據(jù)等。如果我們?cè)趂unction中定義新的function，同時(shí)將內(nèi)層function作為值返回，那么內(nèi)層function所包含的作用域鏈將會(huì)一起返回，即使內(nèi)層function在其他上下文中執(zhí)行，其內(nèi)部的作用域鏈仍然保持著原有的數(shù)據(jù)，而當(dāng)前的上下文可能無法獲取原先外層function中的數(shù)據(jù)，使得function內(nèi)部的作用域鏈被保護(hù)起來，從而形成“閉包”。看下面的例子：

varx=100;varinc=function(){varx=0;returnfunction(){console.log(x++);};};varinc1=inc();varinc2=inc();inc1();// -> 0inc1();// -> 1inc2();// -> 0inc1();// -> 2inc2();// -> 1x;// -> 100

執(zhí)行過程如下圖所示，inc內(nèi)部返回的匿名function在創(chuàng)建時(shí)生成的作用域鏈包括了inc中的x，即使后來賦值給inc1和inc2之后，直接在global context下調(diào)用，它們的作用域鏈仍然是由定義中所處的上下文環(huán)境決定，而且由于x是在function inc中定義的，無法被外層的global context所改變，從而實(shí)現(xiàn)了閉包的效果：

this in closure

我們已經(jīng)反復(fù)提到執(zhí)行上下文和作用域?qū)嶋H上是通過function創(chuàng)建、分割的，而function中的this與作用域鏈不同，它是由執(zhí)行該function時(shí)當(dāng)前所處的Object環(huán)境所決定的，這也是this最容易被混淆用錯(cuò)的一點(diǎn)。一般情況下的例子如下：

varname="global";varo={name:"o",getName:function(){returnthis.name}};o.getName();// -> "o"

由于執(zhí)行o.getName()時(shí)getName所綁定的this是調(diào)用它的o，所以此時(shí)this == o；更容易搞混的是在closure條件下：

varname="global";varoo={name:"oo",getNameFunc:function(){returnfunction(){returnthis.name;};}}oo.getNameFunc()();// -> "global"

此時(shí)閉包函數(shù)被return后調(diào)用相當(dāng)于：

getName=oo.getNameFunc();getName();// -> "global"

換一個(gè)更明顯的例子：

var ooo = {

? name: "ooo",

? getName: oo.getNameFunc() // 此時(shí)閉包函數(shù)的this被綁定到新的Object

};

ooo.getName();? // -> "ooo"

當(dāng)然，有時(shí)候?yàn)榱吮苊忾]包中的this在執(zhí)行時(shí)被替換，可以采取下面的方法：

varname="global";varoooo={name:"ox4",getNameFunc:function(){varself=this;returnfunction(){returnself.name;};}};oooo.getNameFunc()();// -> "ox4"

或者是在調(diào)用時(shí)強(qiáng)行定義執(zhí)行的Object：

varname="global";varoo={name:"oo",getNameFunc:function(){returnfunction(){returnthis.name;};}}oo.getNameFunc()();// -> "global"oo.getNameFunc().bind(oo)();// -> "oo"

總結(jié)

Js是一門很有趣的語言，由于它的很多特性是針對(duì)HTML中DOM的操作，因而顯得隨意而略失嚴(yán)謹(jǐn)，但隨著前端的不斷繁榮發(fā)展和Node的興起，Js已經(jīng)不再是"toy language"或是jQuery時(shí)代的"CSS擴(kuò)展"，本文提到的這些概念無論是對(duì)新手還是從傳統(tǒng)Web開發(fā)中過度過來的Js開發(fā)人員來說，都很容易被混淆或誤解，希望本文可以有所幫助。

寫這篇總結(jié)的原因是我在Github上分享的Learn javascript in one picture，剛開始有人質(zhì)疑這只能算是一張語法表（syntax cheat sheet），根本不會(huì)涉及更深層的閉包、作用域等內(nèi)容，但是出乎意料的是這個(gè)項(xiàng)目竟然獲得3000多個(gè)star，所以不能虎頭蛇尾，以上。