1. 程式人生 > >JavaScript瀏覽器解析原理

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

兩者在步驟上沒有什麼大的區別,只是函式多了形參與實參的那一步。