1.瀏覽器解析JavaScript原理特點: 1.跨平臺 2.弱類型 javascript 定義的時候不需要定義數據類型,數據類型是根據變數值來確定的. var a = 10; 數字類型 var a = true boolean類型 ( 強類型: 定義變數的時候需要定義變數的類型:例如java,C# ...
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>
