前端進階（二）：執行情境圖解

先隨便放張圖

我們在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的執行上下文入堆疊

changeColor的上下文入堆疊之後，控制器開始執行其中的可執行程式碼，遇到swapColors()之後又啟動了一個執行上下文。因此第三步是swapColors的執行上下文入棧。

第三步：swapColors的執行上下文入堆疊

在swapColors的可執行程式碼中，再沒有遇到其他能產生執行上下文的情況，因此這段程式碼順利執行完畢，swapColors的上下文從堆疊中彈出。

第四步：swapColors的執行上下文出堆疊

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

第五步：changeColor的執行上下文出棧

全域上下文在瀏覽器視窗關閉後出棧。

注意：函數中，遇到return能直接終止可執行程式碼的執行，因此會直接將目前上下文彈出堆疊。

整個過程

詳細了解了這個過程之後，我們就可以對執行上下文總結一些結論了。

• 單執行緒

• 同步執行，只有堆疊頂的上下文處於執行中，其他上下文需要等待

• #全域上下文只有唯一的一個，它在瀏覽器關閉時出棧

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

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

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

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

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

上例演变过程

如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。

下一篇文章继续总结执行上下文的创建过程与变量对象，求持续关注与，谢谢大家。

以上是前端進階（二）：執行情境圖解的詳細內容。更多資訊請關注PHP中文網其他相關文章！