瀏覽器解析JavaScript原理
1.瀏覽器解析JavaScript原理特點:
1.跨平臺
2.弱型別 javascript 定義的時候不需要定義資料型別,資料型別是根據變數值來確定的.
var a = 10; 數字型別
var a = true boolean型別
( 強型別: 定義變數的時候需要定義變數的型別:例如java,C#中的int a = 10 boolean a = true,直接確定了資料型別)
3.解釋執行,逐行執行
2.javascript 執行過程
1.語法檢測 看你有沒有基本的語法錯誤,例如中文,關鍵字錯誤...
2.詞法分析(預編譯)
3.逐行執行
3.詞法分析
預編譯的過程（兩種情況）
1.全域性(直接是script標籤中的程式碼,不包括函式執行)
以下面demo為例：
console.log(a); console.log(b) var a = 100; console.log(a) var b = 200 var c = 300 function a(){ } function fun(){ }
執行前:
1) 首先生成一個GO(global object)物件,看不到,但是可以模擬出來用來分析
GO = { //自帶的屬性都不寫 }
2) 分析變數宣告,變數名為屬性名,值為undefined
GO = {
a : undefined,
b : undefined,
c : undefined
}
3）分析函式宣告,函式名為屬性名,值為函式體，如果函式名和變數名相同，則無情覆蓋
GO = { a : function a(){ }, b : undefined, c : undefined, fun :function fun(){ } }
此時,GO就是預編譯完成的最終物件,詞法分析結束。
4） 逐行執行，分析過（變數宣告，函式宣告）不用管了，只管賦值（變數賦值）
a賦了一次值,值改變為100 GO = { a : 100, b : undefined, c : undefined, fun : function fun(){ } }
2.區域性（ 函式執行的時候）
以這個demo為例：
var num = 100; function fun(num){ console.log(num)
} fun(5) fun(10)
1）預編譯的時候
GO = { num : undefined, fun : function }
2）執行過程
GO = { num : 100, fun : function }
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）逐行執行
例項：
在這裡我們看幾個例項：
1，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> console.log(test); //function function test(test){ console.log(test); //function var test = 123; console.log(test); //123 function test(){ } console.log(test); //123 var test = function(){} console.log(test); //function } test(10); var test = 456; /*1.分析變數 GO={ test:undefined } 2.分析函式{ test:function } 3.逐行執行 第21行函式的呼叫 3.1test.AO={} 3.2引數 test.AO={ test:10 } 3.3變數宣告 test.AO={ test:10 } 3.4函式的宣告 test.AO={ test:function } 4逐行執行 */ </script> </body> </html>
2，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function test(){ console.log(b); //undefined if(a){ //undefined轉換成false var b = 100; } c = 123; console.log(c); //123 } var a; test(); a = 20; test(); console.log(c); //123 // 1.生成GO // GO = { // // } // 2.var // GO = { // a : undefined // } // 3.函式宣告 // GO = { // a : undefined, // test : function // } // 4.逐行執行 // 4.1.1 18行,test呼叫,生成test.AO ={} // 4.1.2 引數 沒有,跳過 // 4.1.3 var // test.AO = { // b : undefined // } // 4.1.4 函式宣告 沒有,跳過 // 4.1.5 結果 // test.AO = { // b : undefined // } // 4.1.6 逐行執行 // 14行,改變GO // GO = { // a : undefined, // test : function, // c : 123 // } // // 4.2 19行 a值發生了改變 // GO = { // a : 20, // test : function, // c : 123 // } // // 4.3 20行,test呼叫 生成test.AO={} // 4.3.1 引數 沒有 // 4.3.2 變數宣告 // test.AO = { // b : undefined // } // 4.3.3 函式宣告 沒有 // 4.3.4 結果 // test.AO = { // b : undefined // } // 4.3.5 逐行執行 // test.AO = { // b : 100 // } </script> </body> </html>