javascript預編譯的過程

預編譯的兩種狀況

全局：

1.全局 直接是script標籤中的代碼,不包括函數執行
執行前:
1.首先生成一個GO(global object)對象,看不到,可是能夠模擬出來用來分析
2.分析變量聲明,變量名爲屬性名,值爲undefined
3.分析函數聲明,函數名爲屬性名,值爲函數體，若是函數名和變量名相同，則無情覆蓋

函數內部（局部）：

1. 函數調用,也是會生成本身的做用域(AO:active object),AO活動對象. 函數調用時候,執行前的一瞬間產生的,若是有多個函數的調用,會產生多個AO

a.  函數執行前的一瞬間，生成AO活動對象
b. 分析參數,形參做爲對象的屬性名,實參做爲對象的屬性值
c.  分析變量聲明,變量名爲屬性名,值爲undefined,若是遇到AO對象上屬性同名,不去作任何改變
d. 1.4 分析<b>函數聲明</b>,函數名爲屬性名,值爲函數體，若是遇到AO對象上屬性同名，則無情覆蓋

2. 逐行執行。

 

代碼分析以下：

<script type="text/javascript">
　　console.log(a);
　　console.log(b)
　　var a = 100;
　　console.log(a)
　　var b = 200
　　var c = 300
　　function a(){
　　}
　　function fun(){
　　}
　　console.log(a);
</script>

全局 直接是script標籤中的代碼,不包括函數執行

執行前:

1.首先生成一個GO(global object)對象,看不到,可是能夠模擬出來用來分析

GO = {
自帶的屬性都不寫
}

2.分析變量聲明,變量名爲屬性名,值爲undefined

GO = {
a : undefined,
b : undefined,
c : undefined
}

3.分析<b>函數聲明</b>,函數名爲屬性名,值爲函數體，若是函數名和變量名相同，則無情覆蓋

GO = {
a : function a(){},
b : undefined,
c : undefined,
fun : function fun(){}
}

此時,GO就是預編譯完成的最終對象,詞法分析結束

4.逐行執行，分析過（變量聲明，函數聲明）不用管了，只管賦值（變量賦值）
11行的時候,a賦了一次值,值改變爲100

GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){}
}

局部

<script type="text/javascript">
    var num = 100;
    function fun(num){
        console.log(num)
    }
    fun(5)
    fun(10)
</script>

1.預編譯的時候

GO = {
num : undefined,
fun : function
}

2.執行過程

走到9行

 

GO = {
num : 100,
fun : function
}

走到14行，函數的調用

3.函數調用,也是會生成本身的做用域(AO:active object),AO活動對象. 函數調用時候,執行前的一瞬間產生的,若是有多個函數的調用,會產生多個AO
3.1 函數執行前的一瞬間，生成AO活動對象

fun.AO = {

}

3.2 分析參數,形參做爲對象的屬性名,實參做爲對象的屬性值

fun.AO = {
num : 5
}

3.3 分析變量聲明,變量名爲屬性名,值爲undefined,若是遇到AO對象上屬性同名,不去作任何改變

fun.AO = {
num : 5
}

3.4 分析函數聲明,函數名爲屬性名,值爲函數體，若是遇到AO對象上屬性同名，則無情覆蓋

4.逐行執行

綜合分析：

<script type="text/javascript">
     console.log(test);
     function test(test){
         console.log(test);
         var test = 123;
         console.log(test);
         function test(){ 
         }
         console.log(test);
         var test = function(){}
         console.log(test);
     }
     test(10);
     var test = 456
     console.log(test);
 </script>

預編譯開始，先生成一個GO{

}

1.看變量GO{

test：underfined

}

2.看函數聲明GO{

test：function test(test){

console.log(test);
var test = 123;
console.log(test);
function test(){

}
console.log(test);
var test = function(){}
console.log(test);
}

}

把整個函數體給test

預編譯完成，開始執行代碼，第二行的結果是test函數的函數體

3到13行都是函數聲明，不用管

第14行函數執行，傳入參數10

函數執行的時候產生AO{

}

1.看參數AO{

test：10

}

2.看變量，變量同名，不用管變量AO{

test：10

}

3.看函數，函數和參數同名，函數把參數覆蓋AO{

test：function test（）{}

}

4.逐行執行

第三行打印名字爲test的函數體，

第四行給test賦值123，第五行打印123

7到9行函數體聲明不用管

第十行打印123

第十一行把一個匿名函數（沒有函數名的函數）賦值給test

第十二行函數執行完畢

第十四行回到全局，把456賦值給test

第十五行打印456