本文轉載自微信公眾號「大遷世界」，轉載本文請聯系大遷世界公眾號。

在咱們開始之前，有個問題大家可以一起討論: JS是解釋語言還是編譯語言?

(JS)是一種解釋語言，有自己的編譯器形式，運行在JS引擎中。

每個web瀏覽器都有自己的JS引擎形式，盡管目的一樣。Chrome 有 v8, Mozilla 有 spider monkey等，JS引擎只是將JS源代碼轉換成編譯器能夠理解的語言，然后執行它。

執行上下文

JS 代碼運行的環境構成了執行上下文，執行上下文決定哪段代碼可以訪問變量、函數、對象等。

1. 全局執行上下文

任何時候碼第一次運行，或者當代碼不在任何函數中時，它都會進入全局執行上下文。在整個代碼執行過程中只有一個全局執行上下文。

對于瀏覽器全局執行上下文，它做兩件事：

• 創建window對象。
• 將 this 指向了 windw 對象 (非嚴格模式)

2.  函數執行上下文

當函數執行時，它就創建一個新的函數執行上下文，可以有任意數量的函數執行上下文。

執行堆棧/調用堆棧

瀏覽器中JS解器是單線程，同一時間只能干一件事。代碼中有一個全局的執行上下文和無數個函數執行上下文，那么他們是按什么順序執行的呢?

這里就需要一個 執行上下文棧 的概念了，JS引擎是通過創建執行上下文棧來管理執行上下文的。這里可以把執行上下文棧描述為一個存著函數調用的棧結構，執行順序遵循先進后出的原則,也就是說一個函數的執行上下文，在函數執行完畢之后，會被移除執行上下文棧。

每當腳本在瀏覽器中加載時，堆棧中的第一個元素就是全局執行上下文。然而，當一個函數執行時，將創建一個執行上下文，并將其虛擬的放置在全局執行上下文之上。函數一旦執行完畢，就會從執行堆棧中彈出并將控制權交給到它下面的上下文中。

咱們舉個例子，來模擬上述的過程：

• 步驟1：當上述代碼加載到瀏覽器中時，JS引擎創建一個全局執行上下文(global execution context )并將其推入當前執行堆棧。
• 步驟2：假設最后執行func1()調用，然后JS引擎為該函數創建一個新的執行上下文(function execution context)，并將其推到全局執行上下文的頂部。
• 步驟3：在func1()中，咱們調用了func2()，因此JS引擎為該函數創建一個新的執行上下文，并將其推到func1()執行上下文的頂部。
• 步驟4；當func2()函數結束時，它的執行上下文從當前堆棧中彈出，控制權交給它下面的執行上下文，即func1()函數的執行上下文。
• 步驟5：當func1()函數結束時，它的執行堆棧將從堆棧中刪除，控制權交給全局執行上下文。執行完所有代碼后，JS 引擎將從當前堆棧中刪除全局執行上下文。

執行上下文階段

執行上下文主要有兩個階段。

• 創建
• 執行

1. 創建階段

函數創建時做的三件事：

(1) 首先，為用域鏈內的每個函數或變量構建到外部環境的連接。告訴執行上下文它應該包含什么，以及它應該在哪里查找解析函數引用和變量值的方法。

對于全局環境，外部環境為null。然而，全局環境內的所有環境都是以全局環境作為其外部環境的。

例如:如果函數a包含在函數b中，這意味著a有一個外部環境b。

(2) 接著，通過掃描作用鏈，創建一個環境記錄，其中全局上下文的創建和引用(web瀏覽器中的window)、變量、函數和函數參數都在內存中完成。

(3) 最后，在第一步中創建的每個執行上下文中確定this的值(對于全局執行上下文，this指向的是window)。

因此，咱們可以將創建階段表示為

創建階段 = { 
  scopeChain: { 
        /* 作用域鏈解析 */  
    },     
  variableObject: { 
        /* arguments, 函數參數, 內部變量 等等*/  
    }, 
  this: {}, 
} 

• variableObject：初始化函數的參數variableObject,提升函數聲明和變量聲明。
• scopeChain： 在執行上下文的創建階段，作用域會在變量對象創建之后創建。作用域鏈本身包括變量對象。作用域負責解析變量，當被要求解析變量的時候，會從代碼嵌套結構的最內層開始，如果在最內層沒有找到對應變量，則依次向父級作用域中進行查找，直到尋找到最外層作用域。
• this：確定this的指向，這里需要注意的事this的值是在執行的時候確定的，在定義的時候并不會確定。

執行階段

這是代碼開始在創建階段形成的執行上下文中運行的階段，并逐行分配變量值。

在執行開始時，JS 引擎在其創建階段對象中尋找執行函數的引用。如果不能在自己的作用域內找到它，它將繼續向上查找，直到到達全局環境。

如果在全局環境中沒有找到引用，它將返回一個錯誤。但是，如果找到了一個引用，并且函數執行正確，那么這個特定函數的執行上下文將從堆棧中彈出，JS 引擎將移動到下一個函數，在那里，它們的執行上下文將被添加到堆棧中并執行，依此類推。

咱們通過示例查看上面的兩個階段，以便更好地理解它。

在創建階段，全局執行上下文類似于這樣：

globalExecutionObj = { 
    outerEnvironmentConnection: null, 
    variableObjectMapping: { 
        name: uninitialized, 
        title: undefined, 
        date: uninitialized, 
        func1: func, 
    }, 
    this: window //Global Object 
} 

**注意:**上面，let (name)和const (date)定義的變量在創建階段沒有任何關聯的值，但是var (title)定義的變量會被設置為undefined。

這就是為什么咱們可以在聲明var定義的變量之前訪問它們**(雖然沒有定義)**，但是在聲明let和 const變量之前訪問它們時，會得到一個引用錯誤。

這就是咱們所說的變量提升，即所有使用var的變量聲明都被提升它們的局部作用域(在函數內部聲明)或者全局作用域的頂部(在函數外部聲明的)。

在執行階段，完成變量分配。所以全局執行上下文在執行階段類似如下：

globalExectutionObj = { 
    outerEnvironmentConnection: null, 
    variableObjectMapping: { 
        name: "overflowjs.com", 
        title: "Execution context", 
        date: "5 july 2019", 
        func1: pointer to function func1, 
    }, 
    this: window //Global Object 
} 

**注意:**在執行階段，如果JS引擎在源代碼中聲明位置找不到let變量的值，那么它將為其賦值undefined。

現在，當func1執行，就會生成一個新的函數執行上下文，其創建階段類似如下：

func1ExecutionObj = { 
    outerEnvironmentConnection: Global, 
    variableObjectMapping: { 
       arguments: { 
            0: 10, 
            length: 1 
        }, 
        num: 10, 
 
        author: undefined, 
        val: uninitialized, 
        func2: undefined 
        fixed: uninitialized 
        addFive: pointer to function addFive() 
    }, 
    this: Global Object or undefined 
} 

在執行階段類似如下：

func1ExecutionObj = { 
    outerEnvironmentConnection: Global, 
    variableObjectMapping: { 
       arguments: { 
            0: 10, 
            length: 1 
        }, 
        num: 10, 
 
        author: "Deepak", 
        val: 3, 
        func2: pointer to function func2()  
        fixed: "Divine" 
        addFive: pointer to function addFive() 
    }, 
    this: Global Object or undefined 
} 

函數執行完成后，將更新全局環境。然后全局代碼完成，程序結束。

作用域與作用域鏈

1. 作用域

JavaScript中的作用域分為三種：

• 全局作用域
• 函數作用域
• 塊級作用域(ES6)

作用域最大的作用就是隔離變量或函數，并控制他們的生命周期。作用域是在函數執行上下文創建的時候定義好的，不是在函數執行的時候定義的。

2. 什么是作用域鏈

當一個塊或者函數嵌套在另一個塊或函數中時，就發生了作用域的嵌套。在當前函數中如果JS引擎無法找到某個變量，就會往上級嵌套的作用域中去尋找，直到找到該變量或抵達全局作用域，這樣的鏈式關系成為作用域鏈(Scope Chain)。

來個例子演示一下：

var scope = 'global'; 
 
function checkscope(s) { 
    var scope = 'local scope'; 
     
    function f() { 
        return scope; 
    } 
     
    return f(); 
} 
 
checkScope('scope') 

首先在checkscope函數聲明的時候，內部會綁定一個[[scope]]的內部屬性：

checkscope.[[scope]] = [ 
  globalContext.VO 
]; 

接著在checkScope函數在執行之前，創建執行上下文checkscopeContext,并推入執行上下文棧：

• 賦值函數的[[scope]]屬性初始化作用鏈
• 創建變量對象
• 將變量對象壓入作用域鏈的頂端

// -> 初始化作用域鏈； 
checkscopeContext = { 
  scope: [globalContext.VO], 
} 
 
// -> 創建變量對象 
checkscopeContext = { 
  scope: [globalContext.VO], 
  VO = { 
    arguments: { 
      0: 'scope', 
      length: 1, 
    }, 
    s: 'scope', // 傳入的參數 
    f: function f(), 
    scope: undefined, // 此時聲明的變量為undefined 
  }, 
} 
 
// -> 將變量對象壓入作用域鏈的最頂端 
checkscopeContext = { 
  scope: [VO, globalContext.VO], 
  VO = { 
    arguments: { 
      0: 'scope', 
      length: 1, 
    }, 
    s: 'scope', // 傳入的參數 
    f: function f(), 
    scope: undefined, // 此時聲明的變量為undefined 
  }, 
} 

執行階段，修改變量對象里面對應字段的值：

checkscopeContext = { 
  scope: [VO, globalContext.VO], 
  VO = { 
    arguments: { 
      0: 'scope', 
      length: 1, 
    }, 
    s: 'scope', // 傳入的參數 
    f: pointer to function f(), 
    scope: 'local scope', // 變量賦值 
  } 
} 

在代碼執行階段，會看到f函數的聲明代碼，給f函數綁定[[scope]]屬性：

f.[[scope]] = [ 
  checkscopeContext.VO, // f函數的作用域還包括checkscope的變量對象 
  globalContext.VO 
]; 

文本到這就結束了，希望對大伙有所幫助。