瀏覽器解析JavaScript原理(1)
特點:
1、跨平臺
2、弱類型:JavaScript 定義的時候不需要定義數據類型,數據類型是根據變量值來確定的
強類型:定義變量的時候需要定義變量的類型:例如java,C#中的int a = 10 boolean a = true,直接確定了數據類型
3、解釋執行,逐行執行
JavaScript 執行過程 1、語法檢測 看你有沒有基本的語法錯誤,例如中文,關鍵字錯誤
2、詞法分析(預編譯)
3、逐行執行
這裏我著重講一講JavaScript的執行過程
預編譯的過程分為兩種情況:
一、全局(不包括函數執行)
執行前:
1、首先生成一個GO(global object)對象,看不到,但是可以模擬出來用來分析 GO = { }
2、分析變量聲明,變量名為屬性名,值為undefined
3、分析函數聲明,函數名為屬性名,值為函數體,如果函數名和變量名相同,則無情覆蓋
此時,GO就是預編譯完成的最終對象,詞法分析結束
4.逐行執行,分析過(變量聲明,函數聲明)不用管了,只管賦值(變量賦值)
下面先看一個例子:
console.log(a);var a = 100; console.log(a) var b = 200 var c = 300 function a(){ } function fun(){ }
首先生成一個GO對象GO={ }
然後分析變量聲明:分別var了a.b.c三個變量,
後面又聲明了函數a()和函數fun(),由於函數a()函數名與變量a名字沖突,故將變量覆蓋掉
GO = { a : function a(){ }, b : undefined, c : undefined, fun : function fun(){ } }
然後進行逐行執行:
首先輸出的a為GO對象裏的a:function a(){ };
然後將100賦值給了a,GO對象裏的a值變為100,故第二個輸出的a為100;
二、函數執行
當函數調用,也是會生成自己的作用域(AO:active object)AO活動對象。 函數調用時候,執行前的一瞬間產生的,如果有多個函數的調用,會產生多個AO
1、函數執行前的一瞬間,生成AO活動對象
2、分析參數,形參作為對象的屬性名,實參作為對象的屬性值
3、分析變量聲明,變量名為屬性名,值為undefined,如果遇到AO對象上屬性同名,不去做任何改變(註意這裏的屬性同名是不做任何改變的)
4、分析函數聲明,函數名為屬性名,值為函數體,如果遇到AO對象上屬性同名,則無情覆蓋
5、逐行執行
下面再舉一個簡單的例子:
var num = 100; function fun(num){
var num = 50 console.log(num)
num = 200 } fun(5)
1、預編譯的時候
GO = {
num :undefined,
fun :function
}
2、逐行執行 這時num被賦值變為100; 然後執行函數,參數為5
首先生成函數自己的作用域AO,AO = { }
然後尋找函數中var定義的變量,有一個num,但是num變量名與參數名沖突,不做改變,num的值還是為5
然後逐行執行,先執行到賦值,num被賦值變為50,然後輸出,所以輸出的num值為50,雖然後面還有對num的賦值,但是輸出觸發在前面,故並不影響。
瀏覽器解析JavaScript原理(1)