深刻理解JavaScript 執行上下文

只有理解了執行上下文，才能更好地理解 JavaScript 語言自己，好比變量提高，做用域，閉包等

執行上下文

執行上下文是當前代碼的執行環境。

執行上下文主要是三種類型：

1. 全局執行上下文：全局執行環境是最外圍的一個執行環境，在瀏覽器的全局對象是 window, this指向這個對象
2. 函數執行上下文：能夠有無數個，函數被調用的時候會被建立。每次調用函數都會建立一個新的執行上下文。
3. eval執行上下文，不多用。

每一個執行上下文，都有三個重要屬性：

1. 變量對象 (variable object, VO): 每一個執行環境都有一個與之關聯的變量對象，環境中定義的全部變量和函數都保存在這個對象中。雖然咱們編寫的代碼沒法訪問這個對象，但解析器在處理數據時會在後臺使用它。

在函數上下文中，使用活動對象 (activation object, AO) 來表示變量對象。活動對象和變量對象實際上是一個東西，只有當進入一個執行環境時，這個執行上下文的變量對象纔會被激活，此時稱爲 活動對象（AO），只有活動對象上的屬性才能被訪問。

1. 做用域鏈（scope chain）：當代碼在一個環境中執行時，會建立變量對象的一個做用域鏈。做用域鏈的用途，是保證對執行環境有權訪問的全部變量和函數的有序訪問。
2. this

執行上下文的生命週期：建立 -> 執行 -> 回收

1. 建立階段：

1.1 建立變量對象：

• 初始化函數的參數 arguments
• 函數聲明
• 變量聲明

舉個簡單的例子來理解變量對象

function getName(name) {
    var b = 2;
    function foo() {};
    var bar = function() {};

}
getName('lucystar')

此時的 AO 大體以下

AO = {
    arguments: {
        0: 'lucystar',
        length: 1
    },
    name: 'lucystar',
    b: undefined,
    foo: reference to function foo(){},
    bar: undefined
}

上面例子中涉及到了變量提高和函數提高，以前在 從JS底層理解var、let、const這邊文章中也介紹過

1.2 建立做用域鏈

函數的做用域在函數定義的時候就肯定了。做用域鏈自己包含變量對象，當查找變量時，會先從當前上下文中的變量對象中查找，若是沒有找到，就會從父級執行上下文的變量對象中查找，一直找到全局執行上下文的變量對象

1.3 肯定this的指向

這部分又分爲多種狀況，具體的能夠查看另外一篇文章 一文理解this&call&apply&bind

2. 執行階段

執行變量賦值，代碼執行

3. 回收階段

執行上下文出棧被垃圾回收機制進行回收。關於內存回收的內容，能夠查看 V8內存管理及垃圾回收機制

執行上下文棧

執行上下文棧是用來管理執行上下文的。在執行上下文建立好後，JavaScript引擎會將執行上下文壓入到棧中，一般把這種用來管理執行上下文的棧稱爲執行上下文棧，又稱調用棧。

let a = 'javascript';

function foo() {
    console.log('foo');
    bar();
}
function bar() {
    console.log('bar');
}
foo();

1. 上述代碼在瀏覽器加載時，JavaScript 引擎建立了一個全局執行上下文並把它壓入到當前執行棧。
2. 當遇到 foo() 函數調用時， JavaScript 引擎建立了一個 foo 函數執行上下文並把它壓入到當前執行棧的頂部。
3. 當從 foo() 函數內部調用 bar() 函數時，JavaScript 引擎建立了一個 bar 函數執行上下文並把它壓入到當前執行棧的頂部。
4. 當函數 bar 執行完畢，它的執行上下文會從當前棧中彈出，控制流程到達下一個執行上下文，即 foo() 函數的執行上下文。
5. 當 foo() 執行完成，它的執行上下文從棧彈出，控制流程到達全局執行上下文，一旦全部代碼執行完成，javaScript 引擎就從當前棧中移除全局執行上下文。

爲何基本數據類型存儲在棧中，引用數據類型存儲在堆中？JavaScript引擎須要用棧來維護程序執行期間的上下文的狀態，若是棧空間大了的話，全部數據都存放在棧空間裏面，會影響到上下文切換的效率，進而影響整個程序的執行效率。

參考

• JavaScript深刻之執行上下文棧
• JavaScript深刻之執行上下文
• JavaScript深刻之變量對象
• 深刻理解JavaScript系列（11）：執行上下文（Execution Contexts）
• 《JavaScript高級程序設計 （第三版）》

其餘

最近發起了一個100天前端進階計劃，主要是深挖每一個知識點背後的原理，歡迎關注 微信公衆號「牧碼的星星」，咱們一塊兒學習，打卡100天。同時也會分享一些本身學習的一些心得和想法，歡迎你們一塊兒交流。