所謂JS引擎，就是一種為解釋和執行JavaScript代碼而專門設定的流程虛擬機，
其中最為重要的是一個組件是呼叫堆疊(Call Stack)，它與全域記憶體和執行背景關系一起運行代碼，
在讀取和執行代碼時，是由JS引擎來讀取代碼的，一旦讀取到參考，就會將參考放入全域記憶體（堆）中，
全域記憶體（堆）是JS引擎保存全域變數和全域函式宣告的地方，
那么，當在代碼中運行函式會發生什么呢？
代碼試例：
let [a,b] = [2,4];//解構賦值
function sum(a,b) {
return a+b;
}
sum(a,b);
現在我執行了一個函式，這時如果JS引擎執行這段代碼，就要用到在上文中所說的一個基本組件----呼叫堆疊，
所謂呼叫堆疊，就是一種資料結構：元素可以從頂部進入，而如果元素上面還有其他元素的時候，則需要繼續等待上面頂部元素一一執行，
從這里，我們可以看出，JS是單執行緒的，
但是需要注意的是，JavaScript 確實只在一個執行緒上運行，卻不代表 JavaScript 引擎只有一個執行緒，事實上，JavaScript 引擎有多個執行緒，單個腳本只能在一個執行緒上運行（稱為主執行緒），其他執行緒都是在后臺配合運行，
再強調一遍，JS單執行緒是指JS引擎執行JS代碼時只分了一個執行緒給它執行，也就是執行JS時是單執行緒的，
扯遠了，回到我們的主題，已知組件“呼叫堆疊”的執行方式，與此同時，當執行函式的時候，JS引擎還會分配一個全域執行背景關系，它是運行JS代碼的全域環境，
打個不是很形象的比方：如果全域執行背景關系是我們已知的可以看到的世界，那么全域參考和全域函式都是在世界上面撒歡的我們，可是吧，在某些地方藏著一些未知的小世界，就是全域函式中的嵌套變數或者是若干個內部函式，在這種情況下，JS引擎會創建一個本地執行背景關系
代碼試例：
let [a,b] = [2,3];
function sum(a,b) {
var c = 4;
return a+b;
}
sum(a,b);
在上述情況下，sum全域函式里面定義宣告了一個變數c，這種情況下，sum函式中會創建一個本地執行背景關系，c變數會被放到這個函式的本地執行背景關系中去，
了解了大概的原理，我們來具體討論一下呼叫堆疊和執行背景關系，
呼叫堆疊
先介紹堆和堆疊是什么：
堆疊 (stack) ： 用來保存簡單的資料欄位
堆 (heap) : 用來保存堆疊中簡單資料欄位對指標的參考
堆疊會自動分配記憶體空間，會自動釋放，存放基本型別，簡單的資料段，占據固定大小的空間
而堆是動態分配的記憶體，大小不定也不會自動釋放，存放參考型別，指那些可能由多個值構成的物件，保存在堆記憶體中，包含參考型別的變數，實際上保存的不是變數本身，而是指向該物件的指標，
呃，簡單來說，在記憶體屬性方面，堆疊(stack)會自動分配記憶體空間，會自動釋放，而堆(heap)是動態分配的記憶體，大小不定也不會自動釋放，
（這里的堆疊與資料結構里面的堆疊定義并不相同）
重要的是要知道，堆疊記憶體中關于參考型別的資料的是通過指標(地址)來參考的，指標和地址指向堆記憶體中的資料，
那么為什么會這樣呢？
這是因為基本型別的資料簡單，所占用空間比較小，記憶體由系統自動分配，而參考型別資料比較復雜，復雜程度是動態的，計算機為了較少反復的創建和回收參考型別資料所帶來的損耗，就先為其開辟另外一部分空間——及堆記憶體，以便于這些占用空間較大的資料重復利用，堆記憶體中的資料不會隨著方法的結束立即銷毀，有可能該物件會被其它方法所參考，直到系統的垃圾回識訓制檢索到該物件沒有被任何方法所參考的時候才會對其進行回收，
了解堆疊對明白呼叫堆疊的有很大幫助，我們也更應該了解代碼運行的原理，而不是僅僅知道如何去使用API，
我在上文中提到過了，JavaScript 是一門單執行緒的語言，這意味著它只有一個呼叫堆疊，因此，同一時間只能做一件事，呼叫堆疊記錄了我們在程式中的位置，如果我們運行到一個函式，它就會將其放置到堆疊頂，當從這個函式回傳的時候，就會將這個函式從堆疊頂彈出，毫不留戀！！！
每一個進入呼叫堆疊的可執行代碼都稱為呼叫幀，
當函式呼叫過多，如在遞回函式中無終止條件，就會不斷的入堆疊，直到堆疊溢位，
執行背景關系
在我們的JS代碼在執行之前，JS引擎總要做準備作業，就是創建對應的執行背景關系；
執行背景關系只有三類，全域執行背景關系，函式背景關系，與eval背景關系；由于eval一般不會使用，這里不做討論，
1.全域執行背景關系
全域執行背景關系只有一個，在客戶端中一般由瀏覽器創建，也就是我們熟知的window物件，我們能通過this直接訪問到它，
全域物件window上預定義了大量的方法和屬性，我們在全域環境的任意處都能直接訪問這些屬性方法，同時window物件還是var宣告的全域變數的載體，我們通過var創建的全域物件，都可以通過window直接訪問，
2.函式執行背景關系
函式執行背景關系可存在無數個，每當一個函式被呼叫時都會創建一個函式背景關系；需要注意的是，同一個函式被多次呼叫，都會創建一個新的背景關系，
說到這你是否會想，背景關系種類不同，而且創建的數量還這么多，它們之間的關系是怎么樣的，又是誰來管理這些背景關系呢，沒錯，就是上面一直在講的組件呼叫堆疊，在這里我們叫它執行堆疊，因為在這里它管理執行背景關系，
執行堆疊用于存盤代碼執行期間創建的所有背景關系，具有LIFO（Last In First Out后進先出，也就是先進后出）的特性，其實在上文中都講過了，，，
JS代碼首次運行，都會先創建一個全域執行背景關系并壓入到執行堆疊中，之后每當有函式被呼叫，都會創建一個新的函式執行背景關系并壓入堆疊內；由于執行堆疊LIFO的特性，所以可以理解為，JS代碼執行完畢前在執行堆疊底部永遠有個全域執行背景關系，
好了，上面初步講了執行背景關系的存盤規則，還需要了解執行背景關系的創建，
執行背景關系創建階段
執行背景關系創建分為創建階段與執行階段兩個階段，
執行背景關系的創建階段主要負責三件事：確定this---創建詞法環境組件（LexicalEnvironment）---創建變數環境組件（VariableEnvironment），
1.確定this
官方的稱呼為This Binding，在全域執行背景關系中，this總是指向全域物件，例如瀏覽器環境下this指向window物件，
而在函式執行背景關系中，this的值取決于函式的呼叫方式，如果被一個物件呼叫，那么this指向這個物件，否則this一般指向全域物件window或者undefined（嚴格模式），
2.詞法環境組件（我也不懂，查的資料）
詞法環境是一個包含識別符號變數映射的結構，這里的識別符號表示變數或函式的名稱，變數是對實際物件（包括函式型別物件）或原始值的參考，
詞法環境由環境記錄與對外部環境引入記錄兩個部分組成，
其中環境記錄用于存盤當前環境中的變數和函式宣告的實際位置；外部環境引入記錄很好理解，它用于保存自身環境可以訪問的其它外部環境，
我們在前文提到了全域執行背景關系與函式執行背景關系，所以這也導致了詞法環境分為全域詞法環境與函式詞法環境兩種，
- 全域詞法環境組件：
對外部環境的引入記錄為null，因為它本身就是最外層環境，除此之外它還記錄了當前環境下的所有屬性、方法位置，
- 函式詞法環境組件：
包含了用戶在函式中定義的所有屬性方法外，還包含了一個arguments物件，函式詞法環境的外部環境引入可以是全域環境，也可以是其它函式環境，
3.變數環境組件（我也不懂，查的資料）
變數環境可以說也是詞法環境，它具備詞法環境所有屬性，一樣有環境記錄與外部環境引入，在ES6中唯一的區別在于詞法環境用于存盤函式宣告與let const宣告的變數，而變數環境僅僅存盤var宣告的變數，
重點來了，在執行背景關系創建階段，函式宣告與var宣告的變數在創建階段已經被賦予了一個值，var宣告被設定為了undefined，函式被設定為了自身函式，而let const被設定為未初始化，
這就解釋了變數提升與函式宣告提前，以及為什么let和const有暫時性死域，這是因為作用域創建階段JS引擎的初始化賦值不同，
背景關系除了創建階段外，還有執行階段，這點應該好理解，代碼執行時根據之前的環境記錄對應賦值，比如早期var在創建階段為undefined，如果有值就對應賦值，像let const值為未初始化，如果有值就賦值，無值則賦予undefined，
到了這里，這篇文章就結束了，貌似除了執行背景關系和堆疊呼叫，還說了變數提升和函式宣告提前的原理，下期明天寫this的幾種系結，完結撒花撒花，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290677.html
標籤：其他