1. 程式人生 > 實用技巧 >JS預編譯

JS預編譯

函式宣告與表示式
宣告:function test(){}
表示式:var outer = function(){}

當然還有一些看不見的屬性 [[scope]] 作用域
作用域分為 : 1>、全域性作用域
       2>、區域性作用域

js預編譯GO物件 

js預編譯Go物件
GO物件分為三步走:
1.生成一個GO{global object} ,這裡的GO指的就是window
2.將變數儲存到Go物件中,變數的value值為undefined
3.全域性函式宣告的函式名作為Go物件中的key時,函式體整體存入GO物件

js預編譯GO (逐步執行,在函式執行的前一刻發生預編譯

 1  var a;
 2 
 3         function fun() {
 4 
 5         }
 6 
 7         function abc() {
 8 
 9         }
10 
11         function a() {
12 
13         }
14         console.log(a);
15         var a = 10;
16         console.log(a);
17 (1)會生成一個物件(GO),這個物件封裝的就是作用域,稱為GO(global object)。當全部掛載完成之後,然後程式碼在去逐行執行
18     GO={}
19 (2)分析變數宣告(var)——變數作為GO物件的屬性名,值為undefined
20     GO = {
21         color:undefined;
22         }
23 (3)分析函式宣告(function)——函式名作為GO物件的屬性名,值為函式體(如果遇到同名,直接覆蓋)
24     GO = {
25         a:function a(){};
26         fun:function fun(){}
27                abc:function abc() {}
28     }
29 (4)當走到某一行的時候;a產生了一次賦值;此時GO物件變成了:
30     GO = {
31         a:10;
32         fun:function fun(){}
33                abc:function abc() {}
34     }
35 (5)逐步執行
36     f a(){}  ,   10

預編譯AO物件

AO物件分為三步走:
1.生成一個AO{action object}
2.分析引數,形參作為AO物件的屬性名,實參作為AO物件的屬性值
3.分析var變數宣告,變數名作為AO物件的屬性名,值為undefined
4.分析函式宣告,函式名作為AO物件的屬性名,值為函式體,如果遇到同名的直接覆蓋

 1 (1)會生成一個物件(AO),這個物件封裝的就是作用域,稱為AOaction object)。當全部掛載完成之後,然後程式碼在去逐行執行
 2     
 3 
 4 var num = 10;
 5 
 6 
 7         function fun(num) {
8 console.log(num); 9 } 10 fun(100); 11 // 1.呼叫前生成AO物件 12 // AO={} 13 // 2.分析引數 14 // AO={ 15 // num : 100; 16 // 分析變數宣告:沒有略過 17 // 分析函式宣告:沒有略過 18 // }

(5)逐步執行
100

//強調:1.變數可以從裡往外一層一層查詢使用,但是不能外部的變數內部使用 // 2.AO與GO分辨最簡單的方法:未呼叫時生成GO物件,呼叫後生成AO物件