JavaScript預編譯和執行過程詳解
javascript相對於其它語言來說是一種弱類型的語言,在其它如java語言中,程序的執行需要有編譯的階段,而在javascript中也有類似的“預編譯階段”(javascript的預編譯是以代碼塊為范圍<script></script>,即每遇到一個代碼塊都會進行預編譯>執行
),瞭解javascript引擎的執行機理,將有助於在寫js代碼過程中的思路總結。
首先javascript是解釋型語言,自然就是編譯一行,執行一行。
js運行過程分為三步:
1、語法分析
2、預編譯
3、解釋執行
語法分析就是指js引擎去判斷檢查你的代碼是否存在語法錯誤,解釋執行更不用多說,自然就是執行你的代碼,然而重中之重的是預編譯,預編譯簡單理解就是在內存中開辟一些空間,存放一些變量與函數 。
理解預編譯首先要明白函數聲明和變量賦值:
javascript中的兩種聲明方式,var和function,前者聲明的是變量,後者聲明的是方法。
在預編譯中,javascript對這兩種聲明做出瞭兩種處理方案:
<script> var a = "1"; //聲明變量a function b() { //聲明方法b alert(); } var c = function () { //聲明變量c alert(); } </script>
以上代碼塊中,a、c為變量賦值,b為函數聲明,當執行以上的代碼時,首先會進入預編譯階段,對與變量賦值a、c會在內存中開辟一塊內存空間並指向變量名,且賦值為undefined
預編譯(函數執行前)
1. 創建AO對象(Active Object)
2. 查找函數形參及函數內變量聲明,形參名及變量名作為AO對象的屬性,值為undefined
3. 實參形參相統一,實參值賦給形參
4. 查找函數聲明,函數名作為AO對象的屬性,值為函數引用
題目1:
<script> 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) </script>
分析:
1)、創建AO對象
AO{ }
2)、查找函數形參及函數內變量聲明,形參名及變量名作為AO對象的屬性,值為undefined
AO{ a:undefined, b:undefined, }
3)、實參形參相統一,實參值賦給形參
AO{ a:1, b:undefined, }
4)、查找函數聲明,函數名作為AO對象的屬性,值為函數引用
AO{ a:function a() { }, b:undefined, d:function d() { } }
變量、函數聲明後代碼順序
function fn(a) { var a var b function a() { } function d() { } console.log(a) a = 123 console.log(a) console.log(a) b = function () { } console.log(b) console.log(d) }
解釋執行
當執行到a=123之前時: 此時 console.log(a)打印的值為: function a() {}
AO{ a:function a() { }, b:undefined, d:function d() { } }
當執行到a=123時: 此時 console.log(a)打印的值為: 123 123
AO{ a:123, b:undefined, d:function d() { } }
當執行到b = function () {}時:
此時 console.log(b)打印的值為:function () {}
console.log(d)打印的值為:function d() {}
AO{ a:123, b:function () { }, d:function d() { } }
瀏覽器執行結果:
題目2:
<script> function test(a, b) { console.log(a); c = 0; var c; a = 3; b = 2; console.log(b); function b() { } function d() { } console.log(b) } test(1) </script>
分析:
1)、創建AO對象
AO{ }
2)、查找函數形參及函數內變量聲明,形參名及變量名作為AO對象的屬性,值為undefined
AO{ a:undefined, b:undefined, c:undefined }
3)、實參形參相統一,實參值賦給形參
AO{ a:1, b:undefined, c:undefined }
4)、查找函數聲明,函數名作為AO對象的屬性,值為函數引用
AO{ a:1, b:function b() { }, c:undefined, d:function d() { } }
變量、函數聲明後代碼順序
function test(a, b) { var a var b var c function b() { } function d() { } console.log(a); c = 0; a = 3; b = 2; console.log(b); console.log(b) }
解釋執行
當執行到function d() {}之前時: 此時 console.log(a)打印的值為: 1
AO{ a:1, b:function b() { }, c:undefined, d:function d() { } }
當執行到b=2之前時: 此時 console.log(b)打印的值為: 2 2
AO{ a:1, b:2, c:0, d:function d() { } }
瀏覽器執行結果:
題目3:
<script> 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 = 456; var b = function () { } console.log(a); console.log(b); } test(1) </script>
分析:
1)、創建AO對象
AO{ }
2)、查找函數形參及函數內變量聲明,形參名及變量名作為AO對象的屬性,值為undefined
AO{ a:undefined, b:undefined }
3)、實參形參相統一,實參值賦給形參
AO{ a:1, b:undefined }
4)、查找函數聲明,函數名作為AO對象的屬性,值為函數引用
AO{ a:function a() { }, b:undefined }
變量、函數聲明後代碼順序
function test(a, b) { var a; var b; function a() { } console.log(a); console.log(b); b = 234; console.log(b); a = 123; console.log(a); b = 456; b = function () { } console.log(a); console.log(b); }
解釋執行
當執行到function a() {}時:
此時 console.log(a)打印的值為: function a() {}
console.log(b)打印的值為: undefined
AO{ a:function a() { }, b:undefined }
當執行到 b=234時: 此時 console.log(b)打印的值為: 234
AO{ a:function a() { }, b:234 }
當執行到 a=123時: 此時 console.log(a)打印的值為: 123
AO{ a:123, b:234 }
當執行到 b=456 時
AO{ a:123, b:456 }
當執行到 b = function () {}時:
此時 console.log(a)打印的值為: 123
console.log(b)打印的值為: function () {}
AO{ a:123, b:function () { } }
瀏覽器執行結果:
到此這篇關於JavaScript預編譯和執行過程的文章就介紹到這瞭。希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript閉包中難點深入分析
- 初識JavaScript的基礎
- JavaScript進階知識點作用域詳解
- 一篇文章帶你搞懂JavaScript的變量與數據類型
- JavaScript三大變量聲明詳析