js基礎梳理-究竟什么是執行上下文棧(執行棧),執行上下文(可執行代碼)?


日常在群里討論一些概念性的問題,比如變量提升,作用域和閉包相關問題的時候,經常會聽一些大佬們給別人解釋的時候說執行上下文,調用上下文巴拉巴拉,總有點似懂非懂,不明覺厲的感覺。今天,就對這兩個概念梳理一下,加深對js基礎核心的理解。

1. 執行上下文(execution context)與可執行代碼(execution code)

1.1 首先說一下,可執行代碼的類型有哪些:

  • 全局代碼:例如加載外部的js文件或者本地標簽內的代碼。全局代碼不包括 function 體內的代碼
  • 函數代碼:function體內的代碼
  • eval代碼:eval()函數計算某個字符串,並執行其中的js代碼。比如eval("alert('hello world')")。雖然很強大,但實際用得很少,不討論。

當js引擎遇到這三種類型的代碼的時候,都會進行一些准備工作,這些准備工作,專業的說法就叫執行上下文。或者說js引擎遇到這三種類型的代碼的時候,就會進入到一個執行上下文。

簡而言之,執行上下文是評估和執行javascript代碼的環境的抽象概念。每當javascript代碼在運行的時候,它都是在執行上下文中運行。執行上下文可以理解為當前代碼的執行環境,它會形成一個作用域╭(╯^╰)╮,作用域就作用域嘛,說得這么拗口,非要搞個什么執行上下文的概念)。

1.2 那么js引擎在遇到可執行代碼的時候,它究竟會做哪些准備工作呢?

  • 全局執行上下文:創建一個全局的window對象(瀏覽器的情況下),並且設置 this 的值等於這個全局對象。一個程序中只會有一個全局執行上下文。
  • 函數執行上下文:每當一個函數被調用時,都會為該函數創建一個新的上下文。每個函數都有自己的執行上下文,不過是在函數被調用時創建的。函數上下文可以有任意多個。每當一個新的執行上下文被創建,它會按定義的順序執行一系列步驟。
  • eval函數執行上下文:略

其實沒必要刻意去區分可執行代碼與執行上下文。個人理解,當別人跟你聊一些概念性的東西,聊到可執行代碼,可執行上下文,執行環境的時候,其實他們可能是想說作用域,只不過表述方式不同罷了。

之前寫的這個,有點問題,慚愧。作用域與執行上下文是完全不同的兩個概念。

JavaScript代碼的整個執行過程,分為兩個階段,代碼編譯階段與代碼執行階段。編譯階段由編譯器完成,將代碼編譯成可執行代碼,這個階段作用域規則會確定。執行階段由引擎完成,主要任務是執行可執行代碼,執行上下文在這個階段創建。

2. 執行上下文棧(Execution context stack, ECS)

在一個javascript程序中,必定會產生多個執行上下文,javascript引擎會以棧的方式來處理它們,也就是執行上下文棧(很多文章可能會稱它為執行棧,執行上下文堆棧,函數調用棧,其實都是差不多的意思)。

關於棧的概念和特性在上一篇博客:js基礎梳理-內存空間已有介紹。

為了模擬執行上下文棧的行為,可以把它定義為一個數組:

ECStack = [];

現在 javascript遇到下面這段代碼了

let a = 'hello world';

function first () {
	console.log('進入 first 函數執行上下文');
	second();
	console.log('再次進入 first 函數執行上下文');
}

function second () {
	console.log('進入 second 函數執行上下文');
}

first();

console.log('進入 全局執行上下文(Global Execution Context)')

當上述代碼在瀏覽器加載時,Javascipt引擎創建了一個全局執行上下文並把它壓入了執行上下文棧,用 globalContext表示它,並且只有當整個應用程序結束的時候(瀏覽器關閉),ECStack才會被清空,所以程序結束之前,ECStack最底部永遠有個 globalContext:

ECStack = [
    globalContext
];

當執行到一個函數的時候,就會創建一個執行上下文,並且壓入執行上下文棧,當函數執行完畢的時候,就會將函數的執行上下文從棧中彈出。知道了這樣的工作原理,就可以分析出 ECStack的變化過程:

// 偽代碼

// first()
ECStack.push(<first> functionContext);

// first中調用了second,繼續創建second的執行上下文
ECStack.push(<second> functionContext);

// second執行完畢
ECStack.pop();

// first執行完畢
ECStack.pop();

// javascript接着執行下面的代碼,但是ECStack底層永遠有個globalContext;

image

注意:函數中,遇到return能終止可執行代碼的執行,因此會直接將當前上下文彈出棧。

例如,看以下這個閉包例子:

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

因為f1中的函數f2在f1的可執行代碼中,並沒有被調用執行,因此執行f1時,f2不會創建新的上下文,而直到result執行時,才創建了一個新的。具體演變過程如下:

// 偽代碼:
// 全局上下文入棧:
ECStack = [
    globalContext
];

// f1 EC入棧:
ECStack.push(<f1> functionContext);
// f1 EC出棧:
ECStack.pop();
// result EC入棧:
ECStack.push(<result> functionContext);
// result EC出棧:
ECStack.pop();

3.執行上下文的生命周期

3.1 創建階段

  • 生成變量對象(Variable object, VO)
  • 建立作用域鏈(Scope chain)
  • 確定this指向

3.2 執行階段

  • 變量賦值
  • 函數引用
  • 執行其他代碼

在接下來的文章中將梳理創建階段的這三個步驟。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM