>[success] # JavaScript代碼的執行 1. js 是通過瀏覽器的js引擎進行執行，現階段最流行的引擎就是V8引擎 2. V8是用**C ++**編寫的Google開源高性能JavaScript和WebAssembly引擎，它用于**Chrome和Node.js**等 3. 它實現ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS處理器的Linux系統上運行 4. V8可以獨立運行，也可以嵌入到任何C ++應用程序。最后可以將字節碼編譯為CPU可以直接執行的機器碼  >[info] ## v8 中的一些模塊 1. **Parse**模塊會將JavaScript代碼轉換成**AST**（抽象語法樹），這是因為解釋器并**不直接認識JavaScript代碼**；如果函數沒有被調用，那么是不會被轉換成AST的； * **參考**：Parse的V8官方文檔：https://v8.dev/blog/scanner 2. **Ignition**是一個解釋器，會將**AST轉換成ByteCode**（字節碼），同時會收集TurboFan優化所需要的信息（比如函數參數的類型信息，有了類型才能進行真實的運算）；如果函數只調用一次，Ignition會解釋執行ByteCode； * **參考**： Ignition的V8官方文檔：https://v8.dev/blog/ignition-interpreter 3. **TurboFan是一個編譯器**，可以將字節碼編譯為**CPU可以直接執行的機器碼** 如果一個函數被多次調用，那么就會被標記為熱點函數，那么就會經過TurboFan轉換成優化的機器碼，提高代碼的執行性能；但是，機器碼實際上也會被還原為ByteCode，這是因為如果后續執行函數的過程中，類型發生了變化（比如sum函數原來執行的是number類型，后來執行變成了string類型），之前優化的機器碼并不能正確的處理運算，就會逆向的轉換成字節碼； * **參考**： TurboFan的V8官方文檔：https://v8.dev/blog/turbofan-jit >[success] # JS -- 執行過程 ~~~ 1.V8 引擎為例，在 V8 引擎中 JavaScript 代碼的運行過程主要分成三個階段 1.1.'語法分析階段': 該階段會對代碼進行語法分析，檢查是否有語法錯誤（SyntaxError）， 如果發現語法錯誤，會在控制臺拋出異常并終止執行。 1.2.'編譯階段': 該階段會進行執行上下文（Execution Context）的創建，包括創建變量對象、 建立作用域鏈、確定 this 的指向等。每進入一個不同的運行環境時，V8 引擎都會創建一個新 的執行上下文。 1.3.'執行階段': 將編譯階段中創建的執行上下文壓入調用棧，并成為正在運行的執行上下文， 代碼執行結束后，將其彈出調用棧。 ~~~ >[info] ## 語法分析階段 ~~~ 1.當語法錯誤的時候。控制臺出現'SyntaxError' 就是在這個階段，這個階段分析該js腳本代碼塊的 語法是否正確，如果出現不正確，就拋出'SyntaxError'并且停止，該js代碼塊的執行，然后繼續查 找并加載下一個代碼塊，如果正確就進入下一個階段'預編譯階段' 2.這個階段會經歷 過程'通過詞法分析 -> 語法分析 -> 語法樹' 2.1.'詞法分析'，它讀取字符流（我們的代碼）并使用定義的規則將它們組合成標記（token） 此外，它將刪除空格字符，注釋等。最后，整個代碼字符串將被拆分為一個標記列表。 2.2.'語法分析':將在詞法分析后獲取一個簡單的標記列表，并語法分析階段會把一個令牌流轉換成 抽象語法樹（AST） 的形式。 驗證語言語法并拋出語法錯誤（如果發生這種情況) 3.下面案例通過'espree' JavaScript 解析器 展示詞法語法 ~~~ >[danger] ##### 案例espree ~~~ import * as espree from 'espree' // 詞法分析 const tokens = espree.tokenize('function a(){}', { ecmaVersion: 6 }) console.log(tokens) // ast 語法樹生成 const ast = espree.parse('function a(){}') console.log(ast) ~~~ * 詞法輸出 ~~~ [ Token { type: 'Keyword', value: 'function', start: 0, end: 8 }, Token { type: 'Identifier', value: 'a', start: 9, end: 10 }, Token { type: 'Punctuator', value: '(', start: 10, end: 11 }, Token { type: 'Punctuator', value: ')', start: 11, end: 12 }, Token { type: 'Punctuator', value: '{', start: 12, end: 13 }, Token { type: 'Punctuator', value: '}', start: 13, end: 14 } ] ~~~ * ast 語法樹 ~~~ { "type":"Program", "start":0, "end":14, "body":[ { "type":"FunctionDeclaration", "start":0, "end":14, "id":{ "type":"Identifier", "start":9, "end":10, "name":"a" }, "params":[ ], "body":{ "type":"BlockStatement", "start":12, "end":14, "body":[ ] }, "expression":false, "generator":false } ], "sourceType":"script" } ~~~ >[danger] ##### 總結 ~~~ 1. 詞法分析=》 ast語法樹=》 編譯階段( 1.執行上下文EC,js運行環境 全局上下文EC(G)/函數上下文EC(fn)/eval執行函數上下文/EC(Block)塊級上下文 2.創建變量 3.建立作用域鏈 4.確定this指向 5.變量提升)=》 執行階段 ~~~ >[danger] ##### 參考文章 [JavaScript解釋器 ](https://javascript.ruanyifeng.com/advanced/interpreter.html) [前端進階之 JS 抽象語法樹 ](https://juejin.cn/post/6844903650670673933#heading-2) [一日一練-JS AST抽象語法樹 ](https://jobbym.github.io/2018/12/12/%E4%B8%80%E6%97%A5%E4%B8%80%E7%BB%83-JS-AST%E6%8A%BD%E8%B1%A1%E8%AF%AD%E6%B3%95%E6%A0%91/) >[info] ## JavaScript執行上下文和執行棧 [JS引擎線程的執行過程的三個階段 ](https://juejin.cn/post/6844903788629721096)