浏览器解析JavaScript原理

1.浏览器解析JavaScript原理特点:

1.跨平台
2.弱类型 javascript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的.
　　 var a = 10; 数字类型
var a = true boolean类型
( 强类型: 定义变量的时候需要定义变量的类型:例如java,C#中的int a = 10 boolean a = true,直接确定了数据类型)

3.解释执行,逐行执行

2.javascript 执行过程

1.语法检测看你有没有基本的语法错误,例如中文,关键字错误...
2.词法分析(预编译)
3.逐行执行

3.词法分析

预编译的过程（两种情况）
1.全局(直接是script标签中的代码,不包括函数执行)

以下面demo为例：

 console.log(a);

 console.log(b)

 var a = 100;

 console.log(a)

 var b = 200

 var c = 300

 function a(){

 }

 function fun(){

 }

执行前:
　1) 首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析

GO = {

                //自带的属性都不写

    }

　　　2) 分析变量声明,变量名为属性名,值为undefined　

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.局部（函数执行的时候）

　　　　以这个demo为例：

var num = 100;

function fun(num){

   　console.log(num)
}

 fun(5)

 fun(10)

　　 1）预编译的时候

GO = {

       num : undefined,

       fun : function

    }

　　 2）执行过程

GO = {

                num : 100,

                fun : function

            }

　　 3）函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
　　　　3.1 函数执行前的一瞬间，生成AO活动对象

fun.AO = {

            }

　　　　3.2 分析参数,形参作为对象的属性名,实参作为对象的属性值

fun.AO = {

                num : 5

            }

　　　　3.3 分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变

fun.AO = {

                num : 5

            }

　　　　3.4 分析函数声明,函数名为属性名,值为函数体，如果遇到AO对象上属性同名，则无情覆盖（在这里没有函数声明，跳过）

　　　4）逐行执行

实例：

　　在这里我们看几个实例：

　　1，

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            console.log(test);                //function

            function test(test){

                console.log(test);           //function

                var test = 123;

                console.log(test);            //123

                function test(){

                }

                console.log(test);            //123

                var test = function(){}

                console.log(test);            //function

            }

            test(10);

            var test = 456;

            /*1.分析变量

            GO={

                test:undefined

            }

            2.分析函数{

                test:function

            }

            3.逐行执行

            第21行函数的调用

                3.1test.AO={}

                3.2参数

                test.AO={

                    test:10

                }

                3.3变量声明

                test.AO={

                    test:10

                }

                3.4函数的声明

                test.AO={

                    test:function

                }

                4逐行执行

                */

        </script>

    </body>

</html>

　　2，

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            function test(){

                console.log(b);   //undefined

                if(a){    //undefined转换成false

                    var b = 100;

                }

                c = 123;

                console.log(c);    //123

            }

            var a;

            test();

            a = 20;

            test();

            console.log(c);   //123

//            1.生成GO

//            GO = {

//

//            }

//            2.var

//            GO = {

//                a : undefined

//            }

//            3.函数声明

//            GO = {

//                a : undefined,

//                test : function

//            }

//            4.逐行执行

//                4.1.1    18行,test调用,生成test.AO ={}

//                4.1.2    参数 没有,跳过

//                4.1.3    var

//                test.AO = {

//                    b : undefined

//                }

//                4.1.4    函数声明    没有,跳过

//                4.1.5    结果

//                test.AO = {

//                    b : undefined

//                }

//                4.1.6    逐行执行

//                    14行,改变GO

//                    GO = {

//                        a : undefined,

//                        test : function,

//                        c : 123

//                    }

//

//                4.2   19行   a值发生了改变

//                GO = {

//                    a : 20,

//                    test : function,

//                    c : 123

//                }

//

//                4.3  20行,test调用   生成test.AO={}

//                4.3.1 参数 没有

//                4.3.2 变量声明

//                test.AO = {

//                    b : undefined

//                }

//                4.3.3 函数声明  没有

//                4.3.4 结果

//                test.AO = {

//                    b : undefined

//                }

//                4.3.5 逐行执行

//                test.AO = {

//                    b : 100

//                }

        </script>

    </body>

</html>