快捷導(dǎo)航

JavaScript預(yù)編譯的基本概念和過(guò)程詳解

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

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

全局預(yù)編譯

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

示例：

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

全局預(yù)編譯后的全局對(duì)象：

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

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

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

函數(shù)預(yù)編譯

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

示例：

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ù)預(yù)編譯后的活動(dòng)對(duì)象：

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

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

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

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