我們在JS學習初期或者面試的時候常常會遇到考核變數提升的思考題。比如先來一個簡單一點的。
|
1 2 |
console.log(a); // 這裡會列印出什麼？ var a = 20; |
暫時先不管這個例子，我們先引入一個JavaScript中最基礎，但同時也是最重要的一個概念執行上下文（Execution Context）。
每次當控制器轉到可執行程式碼的時候，就會進入一個執行上下文。執行上下文可以理解為當前程式碼的執行環境，它會形成一個作用域。JavaScript中的執行環境大概包括三種情況。
- 全域性環境：JavaScript程式碼執行起來會首先進入該環境
- 函式環境：當函式被呼叫執行時，會進入當前函式中執行程式碼
- eval
因此在一個JavaScript程式中，必定會產生多個執行上下文，在我的上一篇文章中也有提到，JavaScript引擎會以堆疊的方式來處理它們，這個堆疊，我們稱其為函式呼叫棧(call stack)。棧底永遠都是全域性上下文，而棧頂就是當前正在執行的上下文。
當程式碼在執行過程中，遇到以上三種情況，都會生成一個執行上下文，放入棧中，而處於棧頂的上下文執行完畢之後，就會自動出棧。為了更加清晰的理解這個過程，根據下面的例子，結合圖示給大家展示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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能直接終止可執行程式碼的執行，因此會直接將當前上下文彈出棧。
詳細瞭解了這個過程之後，我們就可以對執行上下文總結一些結論了。
- 單執行緒
- 同步執行，只有棧頂的上下文處於執行中，其他上下文需要等待
- 全域性上下文只有唯一的一個，它在瀏覽器關閉時出棧
- 函式的執行上下文的個數沒有限制
- 每次某個函式被呼叫，就會有個新的執行上下文為其建立，即使是呼叫的自身函式，也是如此。
為了鞏固一下執行上下文的理解，我們再來繪製一個例子的演變過程，這是一個簡單的閉包例子。
|
1 2 3 4 5 6 7 8 9 |
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 |
因為f1中的函式f2在f1的可執行程式碼中，並沒有被呼叫執行，因此執行f1時，f2不會建立新的上下文，而直到result執行時，才建立了一個新的。具體演變過程如下。
下一篇文章繼續總結執行上下文的建立過程與變數物件，求持續關注與點贊，謝謝大家。
前端基礎進階系列我會持續更新，歡迎大家關注我公眾號isreact，新的文章更新了我會在公眾號裡第一時間通知大家。也歡迎大家來簡書關注我。