前端基礎進階（二）：執行上下文詳細圖解

咱們在JS學習初期或者面試的時候經常會遇到考覈變量提高的思考題。好比先來一個簡單一點的。

console.log(a);   // 這裏會打印出什麼？
var a = 20;

暫時先無論這個例子，咱們先引入一個JavaScript中最基礎，但同時也是最重要的一個概念執行上下文（Execution Context）。

每次當控制器轉到可執行代碼的時候，就會進入一個執行上下文。執行上下文能夠理解爲當前代碼的執行環境，它會造成一個做用域。JavaScript中的運行環境大概包括三種狀況。

• 全局環境：JavaScript代碼運行起來會首先進入該環境
• 函數環境：當函數被調用執行時，會進入當前函數中執行代碼
• eval（不建議使用，可忽略）

所以在一個JavaScript程序中，一定會產生多個執行上下文，在個人上一篇文章中也有提到，JavaScript引擎會以棧的方式來處理它們，這個棧，咱們稱其爲函數調用棧(call stack)。棧底永遠都是全局上下文，而棧頂就是當前正在執行的上下文。

當代碼在執行過程當中，遇到以上三種狀況，都會生成一個執行上下文，放入棧中，而處於棧頂的上下文執行完畢以後，就會自動出棧。爲了更加清晰的理解這個過程，根據下面的例子，結合圖示給你們展現。

執行上下文能夠理解爲函數執行的環境，每個函數執行時，都會給對應的函數建立這樣一個執行環境。

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

咱們用ECStack來表示處理執行上下文組的堆棧。咱們很容易知道，第一步，首先是全局上下文入棧。

全局上下文入棧以後，其中的可執行代碼開始執行，直到遇到了changeColor() ，這一句激活函數changeColor建立它本身的執行上下文，所以第二步就是changeColor的執行上下文入棧。

changeColor的上下文入棧以後，控制器開始執行其中的可執行代碼，遇到swapColors()以後又激活了一個執行上下文。所以第三步是swapColors的執行上下文入棧。

在swapColors的可執行代碼中，再沒有遇到其餘能生成執行上下文的狀況，所以這段代碼順利執行完畢，swapColors的上下文從棧中彈出。

swapColors的執行上下文彈出以後，繼續執行changeColor的可執行代碼，也沒有再遇到其餘執行上下文，順利執行完畢以後彈出。這樣，ECStack中就隻身下全局上下文了。

全局上下文在瀏覽器窗口關閉後出棧。

注意：函數中，遇到return能直接終止可執行代碼的執行，所以會直接將當前上下文彈出棧。

詳細瞭解了這個過程以後，咱們就能夠對執行上下文總結一些結論了。

• 單線程
• 同步執行，只有棧頂的上下文處於執行中，其餘上下文須要等待
• 全局上下文只有惟一的一個，它在瀏覽器關閉時出棧
• 函數的執行上下文的個數沒有限制
• 每次某個函數被調用，就會有個新的執行上下文爲其建立，即便是調用的自身函數，也是如此。

爲了鞏固一下執行上下文的理解，咱們再來繪製一個例子的演變過程，這是一個簡單的閉包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

由於f1中的函數f2在f1的可執行代碼中，並無被調用執行，所以執行f1時，f2不會建立新的上下文，而直到result執行時，才建立了一個新的。具體演變過程以下。

若是你在某公衆號看到個人文章，而後發現下面的評論說最後一個例子錯了，請不要管他們，他們把函數調用棧和做用域鏈沒有分清楚就跑出來質疑，真的頗有問題。建議你們讀一讀這系列的第六篇文章，教你如何本身擁有判斷對錯的能力。

最後留一個簡單的例子，你們能夠本身腦補一下這個例子在執行過程當中執行上下文的變化狀況。

var name = "window";

var p = {
  name: 'Perter',
  getName: function() {

    // 利用變量保存的方式保證其訪問的是p對象
    var self = this;
    return function() {
      return self.name;
    }
  }
}

var getName = p.getName();
var _name = getName();
console.log(_name);

下一篇文章繼續總結執行上下文的建立過程與變量對象，求持續關注與點贊，謝謝你們。

前端基礎進階系列目錄