站長資訊網(wǎng)本篇文章給大家?guī)砹岁P(guān)于javascript中預(yù)編譯的相關(guān)知識(shí)，其中主要通過示例來介紹預(yù)編譯的相關(guān)問題，希望對(duì)大家有幫助。
階段(三個(gè))
- 詞法語法分析：詞法語法分析就是檢查JavaScript代碼是否有一些低級(jí)的語法錯(cuò)誤
- 預(yù)編譯：本文主講
- 執(zhí)行代碼：執(zhí)行代碼就是js引擎解析代碼，解析一行執(zhí)行一行
這章主要講預(yù)編譯過程
預(yù)編譯過程
預(yù)編譯也分為2個(gè)時(shí)間點(diǎn)：
- 第一個(gè)是在JavaScript代碼執(zhí)行之前
- 第二個(gè)是在函數(shù)執(zhí)行之前。
但是JavaScript代碼之前，之前的預(yù)編譯只發(fā)生一次，函數(shù)執(zhí)行之前的預(yù)編譯是多次的。
1. JavaScript代碼執(zhí)行之前的預(yù)編譯
- JavaScript代碼執(zhí)行之前，首先會(huì)創(chuàng)建一個(gè)全局對(duì)象，可以理解為
window對(duì)象，也可以理解為GO（Global Object）對(duì)象，我們是看不到的(無法打印) - 然后將所有聲明的全局變量、未使用
var和let聲明的變量放到GO對(duì)象中，并且賦值為undefined(聯(lián)想到“變量提升”) - 分析**函數(shù)聲明：**然后再將所有的函數(shù)聲明也放到GO對(duì)象中，并且賦值為函數(shù)自身的函數(shù)體(函數(shù)名為屬性名,值為函數(shù)體，如果函數(shù)名和變量名相同，則無情覆蓋)
案例說明
<script> var a = 1; console.log(a); console.log(b); var b = 10; function fun (a) { console.log(b); var a = b = 2; var c = 123; console.log(a); console.log(b); } var a2 = 20 fun(1); </script>
結(jié)合上面說的步驟：
-
首先，
<script></script>中的代碼執(zhí)行之前會(huì)創(chuàng)建一個(gè)GO對(duì)象(window對(duì)象)GO = { //自帶的屬性都不寫 } -
將所有聲明的全局變量、未使用
var和let聲明的變量放到GO對(duì)象中，并且賦值為undefinedGO = { a : undefined, b : undefined, a2 : undefined } -
分析函數(shù)聲明，函數(shù)名為屬性名,值為函數(shù)體，如果函數(shù)名和變量名相同，則無情覆蓋
GO = { a : undefined, b : undefined, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } } -
此時(shí)完成了js代碼執(zhí)行之前的預(yù)編譯過程，開始執(zhí)行js代碼，首先是給a進(jìn)行賦值為1，在GO對(duì)象里邊也會(huì)進(jìn)行對(duì)應(yīng)的改變：
GO = { a : 1, b : undefined, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } } -
然后打印a，此時(shí)會(huì)在GO對(duì)象上去找變量a，然后此時(shí)的a的值為1，所以
console.log(a)是等于1的。接著打印b，也會(huì)去GO對(duì)象上找，找到了b的值為undefined，所以console.log(b)是等于undefined。 -
接著執(zhí)行到賦值語句：
b = 10;此時(shí)GO對(duì)象里b的值變成了10GO = { a : 1, b : 10, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } } -
接著下一行代碼是一個(gè)**
fun函數(shù)，此時(shí)不會(huì)去執(zhí)行該函數(shù)**，因?yàn)樵谇懊娴念A(yù)編譯過程中實(shí)際上是被放到了代碼的最前端，就是傳說中的聲明提前，所以忽略掉了。接著給a2進(jìn)行賦值操作：a2 = 20，GO對(duì)象也發(fā)生變化：GO = { a : 1, b : 10, a2 : 20, function fun (a) { var a = b = 2; var c = 123; } } -
接著是執(zhí)行
fun函數(shù)，如上面說到的另外一個(gè)時(shí)間點(diǎn)發(fā)生的預(yù)編譯，就是執(zhí)行函數(shù)之前，現(xiàn)在就來說一下函數(shù)執(zhí)行前的預(yù)編譯是怎么樣的。
2. 函數(shù)執(zhí)行前的預(yù)編譯
-
函數(shù)調(diào)用,也是會(huì)生成自己的作用域(**AO：**Activetion Object,執(zhí)行期上下文)AO活動(dòng)對(duì)象。函數(shù)調(diào)用時(shí)候,執(zhí)行前的一瞬間產(chǎn)生的,如果有多個(gè)函數(shù)的調(diào)用,會(huì)產(chǎn)生多個(gè)AO
- 生成AO對(duì)象：函數(shù)執(zhí)行前的一瞬間，生成AO活動(dòng)對(duì)象
- 分析生成AO屬性：查找形參和變量聲明放到AO對(duì)象，賦值為
undefined - 分析函數(shù)聲明：查找函數(shù)聲明放到AO對(duì)象并賦值為函數(shù)體。函數(shù)名為屬性名,值為函數(shù)體；
如果遇到AO對(duì)象上屬性同名，則無情覆蓋
-
逐行執(zhí)行。
案例說明
拿的是上文中的代碼示例。
-
第一步創(chuàng)建AO對(duì)象
AO{ } -
查找形參和變量聲明放到AO對(duì)象并賦值為
undefined；注意：
fun函數(shù)里邊的b是未經(jīng)var聲明的，所以是全局變量，不會(huì)被放在fun的AO上。AO{ a: undefined,//形參a與局部變量a同名 c: undefined } -
將實(shí)參賦值到形參上
AO{ a: 1, c: undefined, } -
查找函數(shù)聲明放到AO對(duì)象并賦值為函數(shù)體，fun函數(shù)沒有函數(shù)聲明，所以忽略這一步。
-
函數(shù)執(zhí)行之前的預(yù)編譯完成，開始執(zhí)行語句
-
執(zhí)行代碼
-
首先執(zhí)行打印變量b，而此時(shí)
fun的AO里邊并沒有變量b，所以會(huì)去GO對(duì)象里邊找，此時(shí)的GO對(duì)象b的值為10，所以第一行代碼打印出10； -
第二行代碼首先要看的是
b = 2，然后GO對(duì)象里邊b的值就被改為2了。GO = { a : 1, b : 10, a2 : 20, function fun (a) { var a = b = 2; var c = 123; } } -
然后b再賦值給a，變量a是屬于局部變量a，所以
fun的AO對(duì)象里邊a的值被改為2。AO{ a: 2, c: undefined, } -
接著下一個(gè)賦值語句是
c = 123，所以AO對(duì)象中c的值被改為了123AO{ a: 2, c: 123, } -
此時(shí)再執(zhí)行
console.log(a)的值就是AO對(duì)象里邊a的值 2；執(zhí)行console.log(b)的值就是GO對(duì)象b的值 2，至此函數(shù)fun執(zhí)行完畢，緊跟著fun的AO也會(huì)被銷毀。
-
-
綜上所述，依次打印出來的值為：
1，undefined，10，2，2。
總結(jié)
預(yù)編譯兩個(gè)小規(guī)則：
- 函數(shù)聲明整體提升(無論函數(shù)調(diào)用和聲明的位置是前是后，系統(tǒng)總會(huì)把函數(shù)聲明移到調(diào)用前面）
- 變量聲明提升(無論變量調(diào)用和聲明的位置是前是后，系統(tǒng)總會(huì)把聲明移到調(diào)用前，注意僅僅只是聲明，所以值是
undefined）
預(yù)編譯前奏
imply global(暗示全局變量-專業(yè)術(shù)語)即：任何變量，如果未經(jīng)聲明就賦值，則此變量就位全局變量所有。(全局域就是window，這里再一次說明了JavaScript是基于對(duì)象的語言，base on window)- 一切聲明的全局變量，全是
window的屬性；var a=12;等同于window.a = 12;(會(huì)造成window這個(gè)對(duì)象特別臃腫) - 函數(shù)預(yù)編譯發(fā)生在函數(shù)執(zhí)行前一刻(懶加載機(jī)制)
