为编程爱好者分享易语言教程源码的资源网

网站首页 > 网络编程 > javascript 正文

浏览器是如何解析JavaScript的?解析原理介绍

三叶资源网 2022-07-08 javascript 788 ℃ 0 评论

浏览器是如何解析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>


来源:三叶资源网,欢迎分享,公众号:iisanye,(三叶资源网⑤群:21414575

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

百度站内搜索
关注微信公众号
三叶资源网⑤群:三叶资源网⑤群

网站分类
随机tag
流量监控内存调用取色器iiilab视频解析BPL综合例程奇易模块圆形进度条动态调用汇编动态加密阳光车生活app虎牙登陆微信多开微信hook创建时钟支付收款语音素材视频上传屏幕取色内核读写内存QQ注册光标取模块
最新评论

公告×

公告1:域名更换通知
公告2:关于部分地区无法访问本站的解决方法
公告3:未登录用户禁止搜索通知