浏览器解析JavaScript原理

JavaScript的特点:

1:跨平台

2:弱类型的语言,定义的时候不需要定义数据类型,数量类型是根据变量值来确定的

3:边解释边执行

JavaScript执行过程

1:语法检测

2:语法分析

3:逐行执行

词法分析,预编译的两种情况:GO(global object)和AO(active object)

1:全局(直接是script标签中的代码,不包括函数执行

a:首先生成一个GO对象,虽然看不见,但是可以模拟出来分析

GO={

自带的属性都不写

}

b:分析变量声明,变量名为属性名,值为undefined

c:分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同的话,覆盖掉

d:逐行执行(已经分析过的不用管了,只管变量赋值)

以下是一个小例子

eg:

<script>

  console.log(a);

   var  a=100;

     console.log(a)

  var b=200;

  var c=300

  function a(){

}

function fun(){

1.GO={

自带的属性都不写

}

2.GO={    //分析变量声明,变量名为属性名,值为undefined

a:undefined;

b:undefined;

c:undefined

}

3.GO={    //分析函数声明,函数名为属性名,值为函数体,若函数名和变量名相同,则覆盖

a:function  a(){

}

b:undefined;

c:undefined

fun:function fun(){

  }

}  //此时GO就是预编译完成的最终对象,词法分析结束

4:逐行执行,已经分析过的变量声明,函数声明不用管了,只管变量赋值

GO={

a:100;

b:undefined;

c:undefined

fun:function fun(){

  }

}

2.局部  函数执行的时候

a:预编译的时候

GO={

}

b:执行过程

   函数调用也会生成自己的作用域AO(active object),函数调用的时候,执行前的一瞬间产生的,如果有多个函数调用,会产生多个AO

1:函数执行前的一瞬间,生成AO活动对象

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

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

4:分析函数声明,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则覆盖

c:逐行执行

以下是一个小例子

eg:

var num=100;

function fun (num){

console.log(num)

}

fun(5);

1.预编译的时候

GO={

num:undefined;

fun:function;

}

2:执行过程,走到var num=100时

GO={

num:100;

fun:funct

}

走到fun(5)时,函数调用    //分析参数,形参作为对象的属性名,实参作为对象的属性值

fun.AO={

num:5

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

fun.AO={

num:5

}  //分析函数声明,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则覆盖

//逐行执行

原文地址:https://www.cnblogs.com/3542446186qq/p/10133632.html