浏览器解析JavaScript原理

Posted 2021-01-28 lznzxy

特点: 

　　　　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的赋值，但是输出触发在前面，故并不影响。