JavaScript預編譯

JavaScript的預編譯過程總結爲4步

1. 建立AO對象
2. 尋找形參和變量聲明
3. 形參值與實參值相統一
4. 尋找函數聲明

---

函數在執行以前會產生一個上下文對象，即Activeaction Object,簡稱AO對象。
AO對象初始爲一個空對象，可是裏面有一些隱含的默認屬性，好比：this:window, arguments: []。
在預編譯過程當中將會對該對象進行屬性的添加等操做。
複製代碼

下面舉個例子來看一遍整個預編譯過程

假若有如下代碼：

function test (a, b) {
    console.log(a);
    function a () {};
    a = 10;
    console.log(a);
    function b () {};
    console.log(b);
    var b = 111;
    var a = 0;
}
test(2);
複製代碼

接下來分別按照上面的4個步驟進行執行

1. 建立AO對象

//此時AO對象爲
AO = {
    this: window,
    arguments: [],
    ...等隱含屬性
}
複製代碼

2. 尋找形參及變量聲明

// 形參爲a,b, 變量聲明瞭a,b
// 此時AO對象爲
AO = {
    // ...默認屬性
    a: undefined,
    b: undefined,
}
複製代碼

3. 形參值與實參值相統一

AO = {
    // ...默認屬性
    a: 2,
    b: undefined,
}
複製代碼

4. 尋找函數聲明

AO = {
    // ... 默認屬性
    a: function a () {},
    b: function b () {},
}
複製代碼

至此預編譯階段完成，接下來將進行js的執行。

function test (a, b) {
    console.log(a);  // 此時AO對象中a爲function a () {}
    function a () {};
    a = 10;     // 對a賦值爲10
    console.log(a);  // 10
    function b () {};
    console.log(b);  // function b () {}
    var b = 111;    // 對b賦值爲 111
    var a = 0;      // 對a賦值爲 0
}
test(2);
複製代碼

因此執行結果應該爲

身爲一名初入前端的菜鳥，但願本身能夠把成長的經歷記錄下來，以上爲我的理解，若有不足，歡迎斧正。複製代碼