JavaScript預編譯的基本概念和過程詳解

更新時間：2024年05月17日 08:33:20 作者：憶君

JavaScript在執(zhí)行代碼前,會進行一個預編譯的過程,這個過程主要用于處理變量和函數(shù)聲明,預編譯分為全局預編譯和函數(shù)預編譯,本文將給大家詳細的介紹一下JavaScript預編譯的基本概念和過程,需要的朋友可以參考下

全局預編譯

創(chuàng)建全局對象（Global Object, GO）：
- 在瀏覽器中，全局對象是window對象。
處理變量聲明：
- 找到所有的變量聲明，將變量名作為全局對象的屬性名，初始值為undefined。
處理函數(shù)聲明：
- 找到所有的函數(shù)聲明，將函數(shù)名作為全局對象的屬性名，值為函數(shù)對象（整個函數(shù)體）。

示例：

console.log(a); // undefined
var a = 10;
console.log(foo); // Function: foo
function foo() {
    return "hello";
}

全局預編譯后的全局對象：

1.創(chuàng)建GO對象
GO{
    // 空對象
}

2.處理變量聲明
GO = {
    a: undefined
}

3.處理函數(shù)聲明
GO = {
    a: undefined,
    fn: function() {}
}

函數(shù)預編譯

創(chuàng)建活動對象（Activation Object, AO）：
- 每次調(diào)用函數(shù)時，都會創(chuàng)建一個新的活動對象。
處理形參和變量聲明：
- 將形參和變量名作為活動對象的屬性名，初始值為undefined。
形參和實參統(tǒng)一：
- 將實參值賦值給對應的形參。
處理函數(shù)聲明：
- 找到所有的函數(shù)聲明，將函數(shù)名作為活動對象的屬性名，值為函數(shù)對象。

示例：

function bar(x, y) {
    console.log(x); // Function: x
    var x = 20;
    console.log(x); // 20
    function x() {}
    console.log(x); // 20
    var y = function() {};
    console.log(y); // Function: y
}
bar(2);

函數(shù)預編譯后的活動對象：

1.創(chuàng)建AO對象
AO{
    //空對象
}

2.處理形參和變量聲明，值為undefined
AO = {
    x: undefined,
    y: undefined,
}

3.實參和形參統(tǒng)一
AO = {
    x: 2,
    y: undefined
}

4.處理函數(shù)聲明
AO = {
    x: 2,
    y: function() {},
    x: function() {}
}