圖解JavaScript上下文與範圍

標籤：

來自：rainy.im

連結：http://blog.rainy.im/2015/07/04/scope-chain-and-prototype-chain-in-js/

 

 

本文嘗試闡述Javascript中的上下文與範圍背後的機制，主要涉及到執行內容（execution context）、範圍鏈（scope chain）、閉包（closure）、this等概念。

 

Execution context

 

執行內容（簡稱上下文）決定了Js執行過程中可以擷取哪些變數、函數、資料，一段程式可能被分割成許多不同的上下文，每一個上下文都會綁定一個變數對象（variable object），它就像一個容器，用來儲存當前上下文中所有已定義或可擷取的變數、函數等。位於最頂端或最外層的上下文稱為全域上下文（global context），全域上下文取決於執行環境，如Node中的global和Browser中的window：

需要注意的是，上下文與範圍（scope）是不同的概念。Js本身是單進程的，每當有function被執行時，就會產生一個新的上下文，這一上下文會被壓入Js的上下文堆棧（context stack）中，function執行結束後則被彈出，因此Js解譯器總是在棧頂上下文中執行。在產生新的上下文時，首先會綁定該內容相關的變數對象，其中包括arguments和該函數中定義的變數；之後會建立屬於該內容相關的範圍鏈（scope chain），最後將this賦予這一function所屬的Object，這一過程可以通過表示：

 

this

 

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

var x = 1;

var f = function(){

console.log(this.x);

}

f(); // -> 1

 

var ff = function(){

this.x = 2;

console.log(this.x);

}

ff(); // -> 2

x // -> 2

 

var o = {x: "o‘s x", f: f};

o.f(); // "o‘s x"

Scope chain

 

上文提到，在function被執行時產生新的上下文時會先綁定當前內容相關的變數對象，再建立範圍鏈。我們知道function的定義是可以嵌套在其他function所建立的上下文中，也可以並列地定義在同一個上下文中（如global）。範圍鏈實際上就是自下而上地將所有嵌套定義的上下文所綁定的變數對象串接到一起，使嵌套的function可以“繼承”上層內容相關的變數，而並列的function之間互不干擾：

 

var x = ‘global‘;

function a(){

var x = "a‘s x";

function b(){

var y = "b‘s y";

console.log(x);

};

b();

}

function c(){

var x = "c‘s x";

function d(){

console.log(y);

};

d();

}

a(); // -> "a‘s x"

c(); // -> ReferenceError: y is not defined

x // -> "global"

y // -> ReferenceError: y is not defined

Closure

 

如果理解了上文中提到的上下文與範圍鏈的機制，再來看閉包的概念就很清楚了。每個function在調用時會建立新的上下文及範圍鏈，而範圍鏈就是將外層（上層）上下文所綁定的變數對象逐一串聯起來，使當前function可以擷取外層內容相關的變數、資料等。如果我們在function中定義新的function，同時將內層function作為值返回，那麼內層function所包含的範圍鏈將會一起返回，即使內層function在其他上下文中執行，其內部的範圍鏈仍然保持著原有的資料，而當前的上下文可能無法擷取原先外層function中的資料，使得function內部的範圍鏈被保護起來，從而形成“閉包”。看下面的例子：

var x = 100;

var inc = function(){

var x = 0;

return function(){

console.log(x++);

};

};

 

var inc1 = inc();

var inc2 = inc();

 

inc1(); // -> 0

inc1(); // -> 1

inc2(); // -> 0

inc1(); // -> 2

inc2(); // -> 1

x; // -> 100

執行過程如所示，inc內部返回的匿名function在建立時產生的範圍鏈包括了inc中的x，即使後來賦值給inc1和inc2之後，直接在global context下調用，它們的範圍鏈仍然是由定義中所處的上下文環境決定，而且由於x是在function inc中定義的，無法被外層的global context所改變，從而實現了閉包的效果：

this in closure

 

我們已經反覆提到執行內容和範圍實際上是通過function建立、分割的，而function中的this與範圍鏈不同，它是由執行該function時當前所處的Object環境所決定的，這也是this最容易被混淆用錯的一點。一般情況下的例子如下：

var name = "global";

var o = {

name: "o",

getName: function(){

return this.name

}

};

o.getName(); // -> "o"

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

var name = "global";

var oo = {

name: "oo",

getNameFunc: function(){

return function(){

return this.name;

};

}

}

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

此時閉包函數被return後調用相當於：

getName = oo.getNameFunc();

getName(); // -> "global"

換一個更明顯的例子：

var ooo = {

name: "ooo",

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

};

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

當然，有時候為了避免閉包中的this在執行時被替換，可以採取下面的方法：

var name = "global";

var oooo = {

name: "ox4",

getNameFunc: function(){

var self = this;

return function(){

return self.name;

};

}

};

oooo.getNameFunc()(); // -> "ox4"

或者是在調用時強行定義執行的Object：

var name = "global";

var oo = {

name: "oo",

getNameFunc: function(){

return function(){

return this.name;

};

}

}

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

oo.getNameFunc().bind(oo)(); // -> "oo"

總結

 

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

 

寫這篇總結的原因是我在Github上分享的Learn javascript in one picture，剛開始有人質疑這隻能算是一張文法表（syntax cheat sheet），根本不會涉及更深層的閉包、範圍等內容，但是出乎意料的是這個項目竟然獲得3000多個star，所以不能虎頭蛇尾，以上。

 

References

 

1.Understanding Scope and Context in JavaScript

2.this - JavaScript | MDN

3.閉包 - JavaScript | MDN

圖解JavaScript上下文與範圍