JS運行三部曲
js運行代碼共分三步
- 語法分析
- 預編譯
- 解釋執行
JavaScript代碼在運行時，首先會進行語法分析，通篇檢查代碼是否存在低級錯誤，然后進行預編譯，整理內部的一個邏輯，最后再開始一行一行的執行代碼
語法分析
代碼在執行之前，系統會通篇掃描一遍，檢查代碼有沒有低級的語法錯誤，比如少寫個大括號。
預編譯
預編譯前奏
預編譯發生在函數執行的前一刻。變量未經聲明就賦值，此變量為全局對象所有
a = 3
var b = c = 4
一切聲明的全局變量，全是window的屬性
var a = 1 ===> window.a = 1
預編譯四部曲
- 創建AO(Activation Object)對象（里面存儲的是函數內部的局部變量）
- 找形參和變量聲明，將變量和形參名做為AO屬性名，值為undefined
- 將實參和形參統一
- 在函數體里面找函數聲明，值賦予函數體
用一個例子來說明一下，也可以自己先給出一個答案，再繼續往下看
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function fn(a) { console.log(a); var a = 123; console.log(a); function a() {} console.log(a); var b = function() {}; console.log(b); function d() {} console.log(d)}fn(1); |
第一步，創建AO(Activation Object)對象 {}第二步，找形參和變量聲明，將變量和形參名做為AO屬性名，值為undefined
|
1
2
3
4
|
{ a: undefined, b: undefined,} |
第三步，將實參和形參統一
|
1
2
3
4
|
{ a: 1, b: undefined,} |
第四步，找函數聲明，值賦予函數體
|
1
2
3
4
5
|
{ a: function a() {}, b: undefined, d: function d() {}} |
所以在函數fn執行的前一刻，a、b、d的值如上所示
所以fn(1)執行的結果為
// ƒ a() {}
// 123
// 123
// ƒ () {}
// ƒ d() {}
在全局作用域里，預編譯過程有些許不同
- 創建GO(Global Object)對象（里面存儲的是函數內部的全局變量）GO === window
- 找形參和變量聲明，將變量和形參名做為GO屬性名，值為undefined
- 在函數體里面找函數聲明，值賦予函數體
解釋執行
一行一行的執行代碼
實踐題
這里有幾個例題，有興趣的可以看一下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function test(a, b) { console.log(a); console.log(b); var b = 234; console.log(b); a = 123; console.log(a); function a() {} var a; b = 234; var b = function() {}; console.log(a); console.log(b);}test(1); |
|
1
2
3
4
5
6
7
8
9
|
global = 100;function fn() { console.log(global); global = 200; console.log(global); var global = 300;}fn();var global; |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function test() { console.log(b); if (a) { var b = 100; } c = 234; console.log(c);}var a;test();a = 10;console.log(c); |
總結
多數情況下，我們都是采用下面的這種方式來處理預編譯的一個過程
- 函數聲明，整體提升
- 變量聲明，聲明提升
若是遇見復雜的情況就只能采用最原始的方式來解決問題了
到此這篇關于一起來了解一下JavaScript的預編譯(小結)的文章就介紹到這了,更多相關JavaScript 預編譯內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6933756598678454280
