<返回更多

浏览器是如何解析JavaScript的?

2019-11-04    
加入收藏

浏览器是如何解析JAVAScript的?本篇文章就来带大家认识浏览器解析JavaScript的原理,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐视频教程:JavaScript视频教程】

浏览器解析JavaScript原理特点:

1、跨平台

2、弱类型 javascript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的.

var a = 10; //数字类型

var a = true //boolean类型

( 强类型: 定义变量的时候需要定义变量的类型:例如java,C#中的int a = 10 boolean a = true,直接确定了数据类型)

3、解释执行,逐行执行

javascript 执行过程

1、语法检测

就是看你有没有基本的语法错误,例如中文,关键字错误...

2、词法分析(预编译)

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为例:

num = 100510)

1)、预编译的时候

GO = {

num : undefined,

fun : function

}

2)、执行过程

GO = {

num : 100,

fun : function

}

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

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

fun.AO = {

}

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

fun.AO = {

num : 5

}

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

fun.AO = {

num : 5

}

ⅳ、分析函数声明,函数名为属性名,值为函数体,如果遇到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>

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注相关教程栏目!!!

以上就是浏览器是如何解析JavaScript的?解析原理介绍的详细内容,更多请关注其它相关文章!

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>