本篇內(nèi)容介紹了“JavaScript預(yù)編譯過程是什么”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
10年積累的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你,你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程,更有泊頭免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
詞法語法分析:詞法語法分析就是檢查JavaScript代碼是否有一些低級的語法錯誤
預(yù)編譯:本文主講
執(zhí)行代碼:執(zhí)行代碼就是js引擎解析代碼,解析一行執(zhí)行一行
這章主要講預(yù)編譯過程
預(yù)編譯也分為2個時間點:
第一個是在JavaScript代碼執(zhí)行之前
第二個是在函數(shù)執(zhí)行之前。
但是JavaScript代碼之前,之前的預(yù)編譯只發(fā)生一次,函數(shù)執(zhí)行之前的預(yù)編譯是多次的。
JavaScript代碼執(zhí)行之前,首先會創(chuàng)建一個全局對象,可以理解為window
對象,也可以理解為GO(Global Object
)對象,我們是看不到的(無法打印)
然后將所有聲明的全局變量、未使用var
和let
聲明的變量放到GO對象中,并且賦值為undefined
(聯(lián)想到“變量提升”)
分析**函數(shù)聲明:**然后再將所有的函數(shù)聲明也放到GO對象中,并且賦值為函數(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í)行之前會創(chuàng)建一個GO對象(window對象)
GO = { //自帶的屬性都不寫 }
將所有聲明的全局變量、未使用var
和let
聲明的變量放到GO對象中,并且賦值為undefined
GO = { 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; } }
此時完成了js代碼執(zhí)行之前的預(yù)編譯過程,開始執(zhí)行js代碼,首先是給a進(jìn)行賦值為1,在GO對象里邊也會進(jìn)行對應(yīng)的改變:
GO = { a : 1, b : undefined, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } }
然后打印a,此時會在GO對象上去找變量a,然后此時的a的值為1,所以console.log(a)
是等于1的。接著打印b,也會去GO對象上找,找到了b的值為undefined
,所以console.log(b)是等于undefined
。
接著執(zhí)行到賦值語句:b = 10;
此時GO對象里b的值變成了10
GO = { a : 1, b : 10, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } }
接著下一行代碼是一個**fun
函數(shù),此時不會去執(zhí)行該函數(shù)**,因為在前面的預(yù)編譯過程中實際上是被放到了代碼的最前端,就是傳說中的聲明提前,所以忽略掉了。接著給a2進(jìn)行賦值操作:a2 = 20
,GO對象也發(fā)生變化:
GO = { a : 1, b : 10, a2 : 20, function fun (a) { var a = b = 2; var c = 123; } }
接著是執(zhí)行fun
函數(shù),如上面說到的另外一個時間點發(fā)生的預(yù)編譯,就是執(zhí)行函數(shù)之前,現(xiàn)在就來說一下函數(shù)執(zhí)行前的預(yù)編譯是怎么樣的。
函數(shù)調(diào)用,也是會生成自己的作用域(**AO:**Activetion Object,執(zhí)行期上下文)AO活動對象。函數(shù)調(diào)用時候,執(zhí)行前的一瞬間產(chǎn)生的,如果有多個函數(shù)的調(diào)用,會產(chǎn)生多個AO
如果遇到AO對象上屬性同名,則無情覆蓋
生成AO對象:函數(shù)執(zhí)行前的一瞬間,生成AO活動對象
分析生成AO屬性:查找形參和變量聲明放到AO對象,賦值為undefined
分析函數(shù)聲明:查找函數(shù)聲明放到AO對象并賦值為函數(shù)體。函數(shù)名為屬性名,值為函數(shù)體;
逐行執(zhí)行。
拿的是上文中的代碼示例。
第一步創(chuàng)建AO對象
AO{ }
查找形參和變量聲明放到AO對象并賦值為undefined
;
注意:
fun
函數(shù)里邊的b是未經(jīng)var聲明的,所以是全局變量,不會被放在fun
的AO上。
AO{ a: undefined,//形參a與局部變量a同名 c: undefined }
將實參賦值到形參上
AO{ a: 1, c: undefined, }
查找函數(shù)聲明放到AO對象并賦值為函數(shù)體,fun函數(shù)沒有函數(shù)聲明,所以忽略這一步。
函數(shù)執(zhí)行之前的預(yù)編譯完成,開始執(zhí)行語句
執(zhí)行代碼
首先執(zhí)行打印變量b,而此時fun
的AO里邊并沒有變量b,所以會去GO對象里邊找,此時的GO對象b的值為10,所以第一行代碼打印出10;
第二行代碼首先要看的是b = 2
,然后GO對象里邊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對象里邊a的值被改為2。
AO{ a: 2, c: undefined, }
接著下一個賦值語句是c = 123
,所以AO對象中c的值被改為了123
AO{ a: 2, c: 123, }
此時再執(zhí)行console.log(a)
的值就是AO對象里邊a的值 2;執(zhí)行console.log(b)
的值就是GO對象b的值 2,至此函數(shù)fun執(zhí)行完畢,緊跟著fun的AO也會被銷毀。
綜上所述,依次打印出來的值為:1,undefined,10,2,2
。
“JavaScript預(yù)編譯過程是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
文章名稱:JavaScript預(yù)編譯過程是什么
當(dāng)前URL:http://bm7419.com/article14/igsgge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、做網(wǎng)站、網(wǎng)站營銷、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)