浏览器解析JavaScript原理(1)

特点: 

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

      

    

原文地址:https://www.cnblogs.com/lznzxy/p/10133180.html