先隨便放張圖

我們在JS學習初期，或者在面試的時候常常會遇到變量提升相關的思考題。

比如先來一個簡單一點的。

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

暫時先不管這個例子，我們先引入一個JavaScript中最基礎，但同時也是最重要的概念：執(zhí)行上下文（Execution Context）

每次當控制器轉(zhuǎn)到可執(zhí)行代碼的時候，就會進入一個執(zhí)行上下文。執(zhí)行上下文可以理解為當前代碼的執(zhí)行環(huán)境，它會形成一個作用域。JavaScript中的運行環(huán)境大概包括三種情況。

• 全局環(huán)境：JavaScript代碼運行起來會首先進入該環(huán)境
• 函數(shù)環(huán)境：當函數(shù)被調(diào)用執(zhí)行時，會進入當前函數(shù)中執(zhí)行代碼
• eval（不建議使用，可忽略）

因此在一個JavaScript程序中，必定會產(chǎn)生多個執(zhí)行上下文，在我的上一篇文章中也有提到，JavaScript引擎會以棧的方式來處理它們，這個棧，我們稱其為函數(shù)調(diào)用棧(call stack)。棧底永遠都是全局上下文，而棧頂就是當前正在執(zhí)行的上下文。

當代碼在執(zhí)行過程中，遇到以上三種情況，都會生成一個執(zhí)行上下文，放入棧中，而處于棧頂?shù)纳舷挛膱?zhí)行完畢之后，就會自動出棧。為了更加清晰的理解這個過程，根據(jù)下面的例子，結(jié)合圖示給大家展示。

執(zhí)行上下文可以理解為函數(shù)執(zhí)行的環(huán)境，每一個函數(shù)執(zhí)行時，都會給對應的函數(shù)創(chuàng)建這樣一個執(zhí)行環(huán)境。

var color = 'blue';

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

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

  swapColors();
}

changeColor();

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

第一步：全局上下文入棧

全局上下文入棧之后，其中的可執(zhí)行代碼開始執(zhí)行，直到遇到了changeColor()，這一句激活函數(shù)changeColor創(chuàng)建它自己的執(zhí)行上下文，因此第二步就是changeColor的執(zhí)行上下文入棧。

第二步：changeColor的執(zhí)行上下文入棧

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

第三步：swapColors的執(zhí)行上下文入棧

在swapColors的可執(zhí)行代碼中，再沒有遇到其他能生成執(zhí)行上下文的情況，因此這段代碼順利執(zhí)行完畢，swapColors的上下文從棧中彈出。

第四步：swapColors的執(zhí)行上下文出棧

swapColors的執(zhí)行上下文彈出之后，繼續(xù)執(zhí)行changeColor的可執(zhí)行代碼，也沒有再遇到其他執(zhí)行上下文，順利執(zhí)行完畢之后彈出。這樣，ECStack中就只剩下全局上下文了。

第五步：changeColor的執(zhí)行上下文出棧

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

注意：函數(shù)中，遇到return能直接終止可執(zhí)行代碼的執(zhí)行，因此會直接將當前上下文彈出棧。

整個過程

詳細了解了這個過程之后，我們就可以對執(zhí)行上下文總結(jié)一些結(jié)論了。

1. 單線程
2. 同步執(zhí)行，只有棧頂?shù)纳舷挛奶幱趫?zhí)行中，其他上下文需要等待
3. 全局上下文只有唯一的一個，它在瀏覽器關閉時出棧
4. 函數(shù)的執(zhí)行上下文的個數(shù)沒有限制
5. 每次某個函數(shù)被調(diào)用，就會有個新的執(zhí)行上下文為其創(chuàng)建，即使是調(diào)用的自身函數(shù)，也是如此。

為了鞏固一下執(zhí)行上下文的理解，我們再來繪制一個例子的演變過程，這是一個簡單的閉包例子。

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

因為f1中的函數(shù)f2在f1的可執(zhí)行代碼中，并沒有被調(diào)用執(zhí)行，因此執(zhí)行f1時，f2不會創(chuàng)建新的上下文，而直到result執(zhí)行時，才創(chuàng)建了一個新的。具體演變過程如下。

上例演變過程

如果你在某公眾號看到我的文章，然后發(fā)現(xiàn)下面的評論說最后一個例子錯了，請不要管他們。建議大家讀一讀這系列的第六篇文章，教你如何自己擁有判斷對錯的能力。

最后留一個簡單的例子，大家可以自己腦補一下這個例子在執(zhí)行過程中執(zhí)行上下文的變化情況。

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);

下一篇文章繼續(xù)總結(jié)執(zhí)行上下文的創(chuàng)建過程與變量對象，謝謝大家的持續(xù)關注與點贊。

下一篇：前端基礎進階（三）：變量對象詳解
上一篇：前端基礎進階（一）：內(nèi)存空間詳細圖解
前端基礎進階目錄