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

瀏覽器解析JavaScript原理(1)

object 包括 就是 int 賦值 相同 得到 執行 例如

特點:

    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)