圖解Javascript上下文與作用域

本文嘗試闡述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();  // -> 1var ff = function(){  
  this.x = 2;
  console.log(this.x);}ff(); // -> 2  x     // -> 2var 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上分享的 ，剛開始有人質疑這隻能算是一張語法表（syntax cheat sheet），根本不會涉及更深層的閉包、作用域等內容，但是出乎意料的是這個專案竟然獲得3000多個star，所以不能虎頭蛇尾，以上。

References

原文連結：