大家要明白，這個(gè)預(yù)編譯和傳統(tǒng)的編譯是不一樣的（可以理解js預(yù)編譯為特殊的編譯過(guò)程）
JavaScript是解釋型語(yǔ)言絮记，
既然是解釋型語(yǔ)言恢准，就是編譯一行戳气，執(zhí)行一行
傳統(tǒng)的編譯會(huì)經(jīng)歷很多步驟，分詞吸占、解析晴叨、代碼生成什么的
日后有時(shí)間再給大家科普
下面就給大家分享一下我所理解的JS預(yù)編譯
JavaScript運(yùn)行三部曲
腳本執(zhí)行js引擎都做了什么呢？
- 語(yǔ)法分析
- 預(yù)編譯
- 解釋執(zhí)行
語(yǔ)法分析很簡(jiǎn)單矾屯，就是引擎檢查你的代碼有沒(méi)有什么低級(jí)的語(yǔ)法錯(cuò)誤
解釋執(zhí)行顧名思義便是執(zhí)行代碼了
預(yù)編譯簡(jiǎn)單理解就是在內(nèi)存中開(kāi)辟一些空間兼蕊，存放一些變量與函數(shù)
理解了預(yù)編譯對(duì)大家理解作用域同樣有幫助
JS預(yù)編譯什么時(shí)候發(fā)生
預(yù)編譯到底什么時(shí)候發(fā)生
希望大家不要讓上面的運(yùn)行過(guò)程讓你產(chǎn)生誤會(huì)，
誤以為預(yù)編譯僅僅發(fā)生在script內(nèi)代碼塊執(zhí)行前
這倒并沒(méi)有錯(cuò)
預(yù)編譯確確實(shí)實(shí)在script代碼內(nèi)執(zhí)行前發(fā)生了
但是它都會(huì)發(fā)生在函數(shù)執(zhí)行前
JS預(yù)編譯實(shí)例
舉例前件蚕，先來(lái)思考一下這幾個(gè)概念：
- 變量聲明 var
- 函數(shù)聲明 function
<script>
var a = 1;// 變量聲明
function b(y){//函數(shù)聲明
var x = 1;
console.log('so easy');
};
var c = function(){//是變量聲明而不是函數(shù)聲明Ｋ锛肌！
//...
}
b(100);
</script>
<script>
var d = 0;
</script>
讓我們看看引擎對(duì)這段代碼做了什么吧
- 頁(yè)面產(chǎn)生便創(chuàng)建了GO全局對(duì)象（Global Object）（也就是大家熟悉的window對(duì)象）
- 第一個(gè)腳本文件加載
- 腳本加載完畢后骤坐，分析語(yǔ)法是否合法
- 開(kāi)始預(yù)編譯
- 查找變量聲明绪杏，作為GO屬性，值賦予undefined
- 查找函數(shù)聲明纽绍，作為GO屬性蕾久，值賦予函數(shù)體
//偽代碼
GO/window = {
//頁(yè)面加載創(chuàng)建GO同時(shí)，創(chuàng)建了document拌夏、navigator僧著、screen等等屬性履因，此處省略
a: undefined,
c: undefined，
b: function(y){
var x = 1;
console.log('so easy');
}
}
- 解釋執(zhí)行代碼（直到執(zhí)行函數(shù)b）
//偽代碼
GO/window = {
//變量隨著執(zhí)行流得到初始化
a: 1,
c: function(){
//...
},
b: function(y){
var x = 1;
console.log('so easy');
}
}
- 執(zhí)行函數(shù)b之前盹愚，發(fā)生預(yù)編譯
- 創(chuàng)建AO活動(dòng)對(duì)象（Active Object）
- 查找形參和變量聲明栅迄，值賦予undefined
- 實(shí)參值賦給形參
- 查找函數(shù)聲明，值賦予函數(shù)體
//偽代碼
AO = {
//創(chuàng)建AO同時(shí)皆怕，創(chuàng)建了arguments等等屬性毅舆，此處省略
y: 100,
x: undefined
}
- 解釋執(zhí)行函數(shù)中代碼
- 第一個(gè)腳本文件執(zhí)行完畢，加載第二個(gè)腳本文件
- 第二個(gè)腳本文件加載完畢后愈腾，進(jìn)行語(yǔ)法分析
- 語(yǔ)法分析完畢憋活，開(kāi)始預(yù)編譯
- 重復(fù)最開(kāi)始的預(yù)編譯步驟
大家要注意:
預(yù)編譯階段發(fā)生變量聲明和函數(shù)聲明，沒(méi)有初始化行為（賦值）虱黄，匿名函數(shù)不參與預(yù)編譯只有在解釋執(zhí)行階段才會(huì)進(jìn)行變量初始化
總結(jié)
預(yù)編譯(函數(shù)執(zhí)行前)
- 創(chuàng)建AO對(duì)象（Active Object）
- 查找函數(shù)形參及函數(shù)內(nèi)變量聲明悦即，形參名及變量名作為AO對(duì)象的屬性，值為undefined
- 實(shí)參形參相統(tǒng)一橱乱，實(shí)參值賦給形參
- 查找函數(shù)聲明辜梳，函數(shù)名作為AO對(duì)象的屬性，值為函數(shù)引用
預(yù)編譯(腳本代碼塊script執(zhí)行前)
- 查找全局變量聲明（包括隱式全局變量聲明泳叠，省略var聲明）作瞄，變量名作全局對(duì)象的屬性，值為undefined
- 查找函數(shù)聲明析二，函數(shù)名作為全局對(duì)象的屬性粉洼，值為函數(shù)引用
作者：accelerator
來(lái)源：CSDN
原文：https://blog.csdn.net/q1056843325/article/details/52951114
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接叶摄！
