JavaScript瀏覽器解析原理
首先,JavaScript的特點是:
1. 跨平臺
可以再不同的作業系統上執行。
2. 弱型別
與之相對的是強型別
強型別:在定義變數的時候,需要將變數的資料型別表明。例如:Java
弱型別:定義變數的時候不需要定義資料型別,資料型別根據變數值來確定。例如:JavaScript
3. 解釋執行,逐行執行
其次,JavaScript在瀏覽器中的執行過程分為三步:
1. 語法檢測
主要看你的程式碼有沒有基本的語法錯誤。例如:中文,關鍵字等等
2. 詞法分析(預編譯) ----- 重點介紹
3. 逐行執行
詞法分析(預編譯)
主要分為兩種情況(全域性,函式)
1. 全域性(直接是script標籤中的程式碼,不包括函式中的):
console.log(a); //返回值:function a(){}
var a = 100;
console.log(a) //返回值:100
var b = 200
var c = 300
function a(){
}
function fun(){
}
1. 在函式執行前,會生成一個GO(global object)物件,這是一個看不到的物件,但是我們可以模擬出來分析。
GO = {}
2. 分析變數宣告,變數名為屬性名,值為underfined
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 . 區域性、函式執行時
var num = 100;
function fun(num){
var a = 10;
console.log(num);
}
fun(5)
1. 預編譯:先是全域性
GO = {
num : undefined,
fun : function
}
GO = {
num : 100,
fun : function
}
2. 然後逐行執行,到fun(5),函式呼叫,回生成自己的作用域AO(active object),函式呼叫時,在執行前的一瞬間產生,如果有多個函式呼叫,就會產生多個AO,並且各不干擾,各不相同。
fun.AO = {
}
3. 分析引數,形參作為屬性名,實參作為值
fun.AO = {
num : 5
}
4. 分析變數宣告,變數名為屬性名,值為underfined,如果遇到AO物件上屬性同名,不去做任何改變
fun.AO = {
num : 5,
a : underfined
}
5. 函式宣告,函式名為屬性名,值為整個函式體,如果遇到AO物件上屬性同名,則無情覆蓋(沒有跳過)
6. 逐行執行,分析過(變數宣告、函式宣告)不用管,只管賦值(變數賦值)
fun.AO = {
num : 5,
a : underfined
}
最後的輸出的為:5
兩者在步驟上沒有什麼大的區別,只是函式多了形參與實參的那一步。