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

cjie 發布于2019-08-21 18:29 / 806人閱讀

摘要：執行上下文可以理解為當前代碼的執行環境，它會形成一個作用域。棧底永遠都是全局上下文，而棧頂就是當前正在執行的上下文。我們用來表示處理執行上下文組的堆棧。因此第三步是的執行上下文入棧。前端基礎進階系列目錄

我們在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);

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

前端基礎進階系列目錄

云服務器 GPU云服務器 centos7安裝詳細圖解執行上下文前端基礎前端基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90523.html

前端基礎進階目錄

摘要：不過其實簡書文章評論里有很多大家的問題以及解答，對于進一步理解文中知識幫助很大的，算是有點可惜吧。不過也希望能夠對正在學習前端的你有一些小幫助。如果在閱讀中發現了一些錯誤，請在評論里告訴我，我會及時更改。前端基礎進階（一）：內存空間詳細圖解前端基礎進階（二）：執行上下文詳細圖解前端基礎進階（三）：變量對象詳解前端基礎進階（四）：詳細圖解作用域鏈與閉包前端基礎進階（五）：全方位...

mo0n1andin 2019-08-21 18:30 評論0 收藏0
文章分享（持續更新）

摘要：文章分享持續更新更多資源請文章轉自一前端文章基礎篇，，前端基礎進階一內存空間詳細圖解前端基礎進階二執行上下文詳細圖解前端基礎進階三變量對象詳解前端基礎進階四詳細圖解作用域鏈與閉包前端基礎進階五全方位解讀前端基礎進階六在開發者工具中觀察函數調文章分享（持續更新）更多資源請Star：https://github.com/maidishike... 文章轉自：https://gith...

whlong 2019-08-20 14:31 評論0 收藏0
前端基礎進階（一）：內存空間詳細圖解

摘要：一棧數據結構與不同，中并沒有嚴格意義上區分棧內存與堆內存。引用數據類型的值是保存在堆內存中的對象。不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。為了更好的搞懂變量對象與堆內存，我們可以結合以下例子與圖解進行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 評論0 收藏0
【進階1-3期】JavaScript深入之內存空間詳細圖解

摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。本計劃一共28期，每期重點攻...

coordinate35 2019-08-23 13:47 評論0 收藏0
前端基礎進階（四）：詳細圖解作用域鏈與閉包

摘要：之前一篇文章我們詳細說明了變量對象，而這里，我們將詳細說明作用域鏈。而的作用域鏈，則同時包含了這三個變量對象，所以的執行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當前的函數調用棧，為當前正在被執行的函數的作用域鏈，為當前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學JavaScrip...

aikin 2019-08-21 18:29 評論0 收藏0