深刻理解Javascript之執行上下文(Execution Context)

 在這篇文章中，將比較深刻地闡述下執行上下文 - Javascript中最基礎也是最重要的一個概念。相信讀完這篇文章後，你就會明白javascript引擎內部在執行代碼之前到底作了些什麼，爲何某些函數以及變量在沒有被聲明之前就能夠被使用，以及它們的最終的值是怎樣被定義的。

什麼是執行上下文

Javascript中代碼的運行環境分爲如下三種：

• 全局級別的代碼 - 這個是默認的代碼運行環境，一旦代碼被載入，引擎最早進入的就是這個環境。

• 函數級別的代碼 - 當執行一個函數時，運行函數體中的代碼。

• Eval的代碼 - 在Eval函數內運行的代碼。

 

在網上能夠找到不少闡述做用域的資源，爲了使該文便於你們理解，咱們能夠將「執行上下文」看作當前代碼的運行環境或者做用域。下面咱們來看一個示例，其中包括了全局以及函數級別的執行上下文：

上圖中，一共用4個執行上下文。紫色的表明全局的上下文；綠色表明person函數內的上下文；藍色以及橙色表明person函數內的另外兩個函數的上下文。注意，無論什麼狀況下，只存在一個全局的上下文，該上下文能被任何其它的上下文所訪問到。也就是說，咱們能夠在person的上下文中訪問到全局上下文中的sayHello變量，固然在函數firstName或者lastName中一樣能夠訪問到該變量。

至於函數上下文的個數是沒有任何限制的，每到調用執行一個函數時，引擎就會自動新建出一個函數上下文，換句話說，就是新建一個局部做用域，能夠在該局部做用域中聲明私有變量等，在外部的上下文中是沒法直接訪問到該局部做用域內的元素的。在上述例子的，內部的函數能夠訪問到外部上下文中的聲明的變量，反之則行不通。那麼，這究竟是什麼緣由呢？引擎內部是如何處理的呢？

執行上下文堆棧

在瀏覽器中，javascript引擎的工做方式是單線程的。也就是說，某一時刻只有惟一的一個事件是被激活處理的，其它的事件被放入隊列中，等待被處理。下面的示例圖描述了這樣的一個堆棧：

咱們已經知道，當javascript代碼文件被瀏覽器載入後，默認最早進入的是一個全局的執行上下文。當在全局上下文中調用執行一個函數時，程序流就進入該被調用函數內，此時引擎就會爲該函數建立一個新的執行上下文，而且將其壓入到執行上下文堆棧的頂部。瀏覽器老是執行當前在堆棧頂部的上下文，一旦執行完畢，該上下文就會從堆棧頂部被彈出，而後，進入其下的上下文執行代碼。這樣，堆棧中的上下文就會被依次執行而且彈出堆棧，直到回到全局的上下文。請看下面一個例子：

1 2 3 4 5 6 7 8

( function foo (i )  {     if  (i  ===  3 )  {         return ;     }     else  {        foo ( ++i ) ;     } } ( 0 ) ) ;

上述foo被聲明後，經過()運算符強制直接運行了。函數代碼就是調用了其自身3次，每次是局部變量i增長1。每次foo函數被自身調用時，就會有一個新的執行上下文被建立。每當一個上下文執行完畢，該上上下文就被彈出堆棧，回到上一個上下文，直到再次回到全局上下文。真個過程抽象以下圖:

因而可知 ，對於執行上下文這個抽象的概念，能夠概括爲如下幾點：

• 單線程

• 同步執行

• 惟一的一個全局上下文

• 函數的執行上下文的個數沒有限制

• 每次某個函數被調用，就會有個新的執行上下文爲其建立，即便是調用的自身函數，也是如此。

執行上下文的創建過程

 

咱們如今已經知道，每當調用一個函數時，一個新的執行上下文就會被建立出來。然而，在javascript引擎內部，這個上下文的建立過程具體分爲兩個階段:

1. 創建階段(發生在當調用一個函數時，可是在執行函數體內的具體代碼之前)

   • 創建變量，函數，arguments對象，參數

   • 創建做用域鏈

   • 肯定this的值

2. 代碼執行階段:

   • 變量賦值，函數引用，執行其它代碼

實際上，能夠把執行上下文看作一個對象，其下包含了以上3個屬性：

1 2 3 4 5

executionContextObj  =  {    variableObject :  {  /* 函數中的arguments對象, 參數, 內部的變量以及函數聲明 */  } ,    scopeChain :  {  /* variableObject 以及全部父執行上下文中的variableObject */  } ,     this :  { }   }

創建階段以及代碼執行階段的詳細分析

確切地說，執行上下文對象（上述的executionContextObj）是在函數被調用時，可是在函數體被真正執行之前所建立的。函數被調用時，就是我上述所描述的兩個階段中的第一個階段 - 創建階段。這個時刻，引擎會檢查函數中的參數，聲明的變量以及內部函數，而後基於這些信息創建執行上下文對象（executionContextObj）。在這個階段，variableObject對象，做用域鏈，以及this所指向的對象都會被肯定。

上述第一個階段的具體過程以下：

1. 找到當前上下文中的調用函數的代碼

2. 在執行被調用的函數體中的代碼之前，開始建立執行上下文

3. 進入第一個階段-創建階段:

   • 創建variableObject對象:

     1. 創建arguments對象，檢查當前上下文中的參數，創建該對象下的屬性以及屬性值

     2. 檢查當前上下文中的函數聲明：

        • 每找到一個函數聲明，就在variableObject下面用函數名創建一個屬性，屬性值就是指向該函數在內存中的地址的一個引用

        • 若是上述函數名已經存在於variableObject下，那麼對應的屬性值會被新的引用所覆蓋。

     3. 檢查當前上下文中的變量聲明：

        • 每找到一個變量的聲明，就在variableObject下，用變量名創建一個屬性，屬性值爲undefined。

        • 若是該變量名已經存在於variableObject屬性中，直接跳過(防止指向函數的屬性的值被變量屬性覆蓋爲undefined)，原屬性值不會被修改。

   • 初始化做用域鏈

   • 肯定上下文中this的指向對象

4. 代碼執行階段:

   • 執行函數體中的代碼，一行一行地運行代碼，給variableObject中的變量屬性賦值。

下面來看個具體的代碼示例:

1 2 3 4 5 6 7 8 9 10 11

function foo (i )  {     var a  =  'hello' ;     var b  =  function privateB ( )  {     } ;     function c ( )  {     } } foo ( 22 ) ;

在調用foo(22)的時候，創建階段以下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

fooExecutionContext  =  {    variableObject :  {        arguments :  {             0 :  22 ,            length :  1         } ,        i :  22 ,        c : pointer to  function c ( )        a : undefined ,        b : undefined     } ,    scopeChain :  { ...  } ,     this :  { ...  } }

因而可知，在創建階段，除了arguments，函數的聲明，以及參數被賦予了具體的屬性值，其它的變量屬性默認的都是undefined。一旦上述創建階段結束，引擎就會進入代碼執行階段，這個階段完成後，上述執行上下文對象以下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

fooExecutionContext  =  {    variableObject :  {        arguments :  {             0 :  22 ,            length :  1         } ,        i :  22 ,        c : pointer to  function c ( )        a :  'hello' ,        b : pointer to  function privateB ( )     } ,    scopeChain :  { ...  } ,     this :  { ...  } }

咱們看到，只有在代碼執行階段，變量屬性纔會被賦予具體的值。

局部變量做用域提高的原因

在網上一直看到這樣的總結： 在函數中聲明的變量以及函數，其做用域提高到函數頂部，換句話說，就是一進入函數體，就能夠訪問到其中聲明的變量以及函數。這是對的，可是知道其中的原因嗎？相信你經過上述的解釋應該也有所明白了。不過在這邊再分析一下。看下面一段代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

( function ( )  {    console. log ( typeof foo ) ;  // function pointer    console. log ( typeof bar ) ;  // undefined     var foo  =  'hello' ,        bar  =  function ( )  {             return  'world' ;         } ;     function foo ( )  {         return  'hello' ;     } } ( ) ) ;

上述代碼定義了一個匿名函數，而且經過()運算符強制理解執行。那麼咱們知道這個時候就會有個執行上下文被建立，咱們看到例子中立刻能夠訪問foo以及bar變量，而且經過typeof輸出foo爲一個函數引用，bar爲undefined。

• 爲何咱們能夠在聲明foo變量之前就能夠訪問到foo呢？

  由於在上下文的創建階段，先是處理arguments, 參數，接着是函數的聲明，最後是變量的聲明。那麼，發現foo函數的聲明後，就會在variableObject下面創建一個foo屬性，其值是一個指向函數的引用。當處理變量聲明的時候，發現有var foo的聲明，可是variableObject已經具備了foo屬性，因此直接跳過。當進入代碼執行階段的時候，就能夠經過訪問到foo屬性了，由於它已經就存在，而且是一個函數引用。

• 爲何bar是undefined呢？

   

  由於bar是變量的聲明，在創建階段的時候，被賦予的默認的值爲undefined。因爲它只要在代碼執行階段纔會被賦予具體的值，因此，當調用typeof(bar)的時候輸出的值爲undefined。

好了，到此爲止，相信你應該對執行上下文有所理解了，這個執行上下文的概念很是重要，務必好好搞懂之！