您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

浏览器是如何解析JavaScript的?

时间:2019-11-04 11:32:29  来源:  作者:

浏览器是如何解析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的?解析原理介绍的详细内容,更多请关注其它相关文章!



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
1、将arguments对象转换为数组arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。但这与其他数组不同,我们可以访问值并获取长度,但是不能对其...【详细内容】
2021-07-04  Tags: JavaScript  点击:(12)  评论:(0)  加入收藏
JavaScript是Web开发中最简单的面向结果的语言之一。该语言使数据的处理和计算成为一种方便。它还有助于将视觉效果添加到屏幕上。它是一种同时用于客户端和服务器端应用程...【详细内容】
2021-06-25  Tags: JavaScript  点击:(17)  评论:(0)  加入收藏
在执行JavaScript代码之前,js引擎首先会对其进行解析和编译。在编译阶段,变量和函数声明被放入内存,这被称为提升(hoisting)。...【详细内容】
2021-06-23  Tags: JavaScript  点击:(24)  评论:(0)  加入收藏
无论使用何种编程语言,代码都需要根据不同的情况对给定的输入做出不同的决定并执行相应的操作。举例来说,在游戏中,如果玩家的生命值是0,游戏就结束了。在气象应用程序中,如果观...【详细内容】
2021-06-18  Tags: JavaScript  点击:(25)  评论:(0)  加入收藏
在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式的图片。针对这个问题,我们会想到通过 input 元素的 accept...【详细内容】
2021-06-10  Tags: JavaScript  点击:(43)  评论:(0)  加入收藏
事件什么是event对象用来获取事件的详细信息:鼠标位置,键盘按键获取鼠标位置:clientXdocument对象:document对象代表当前文档,使用window对象的document属性访问,当浏览器加载文档...【详细内容】
2021-06-08  Tags: JavaScript  点击:(43)  评论:(0)  加入收藏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-widt...【详细内容】
2021-05-27  Tags: JavaScript  点击:(56)  评论:(0)  加入收藏
前言本篇内容将按照下图展开: 遍历ObjectObject最常见的遍历方法方法就是使用 for...in... ,但其有一定的局限性,比如只能遍历可枚举属性。虽然Object无法直接使用 for循环 和...【详细内容】
2021-04-27  Tags: JavaScript  点击:(92)  评论:(0)  加入收藏
我搜寻了很多驯服JavaScript的工具,结果发现了它3主流,2晦涩,1在上升> Photo by Anna Elfimova on Unsplash 我已经使用静态类型语言进行编码多年,从Assembler开始,通过Visual Ba...【详细内容】
2021-04-23  Tags: JavaScript  点击:(124)  评论:(0)  加入收藏
全世界有超过1000万的Javascript开发人员,而且这个数字每天都在增加。尽管JavaScript更出名的是它的动态特性,但它也有许多其他很棒的特性。在这篇博客中,我们将看到20个你应...【详细内容】
2021-04-20  Tags: JavaScript  点击:(102)  评论:(0)  加入收藏
▌简易百科推荐
1、将arguments对象转换为数组arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。但这与其他数组不同,我们可以访问值并获取长度,但是不能对其...【详细内容】
2021-07-04  WilsonChen肥仔    Tags:javascript   点击:(12)  评论:(0)  加入收藏
JavaScript是Web开发中最简单的面向结果的语言之一。该语言使数据的处理和计算成为一种方便。它还有助于将视觉效果添加到屏幕上。它是一种同时用于客户端和服务器端应用程...【详细内容】
2021-06-25  程序飒飒    Tags:JavaScript   点击:(17)  评论:(0)  加入收藏
介绍viewer.js是一个专门用于图片预览的js库,图片预览效果很好,支持诸如缩放(支持滚轮操作)、旋转、播放、左右翻转、最大化等诸多使用功能,v-viewer则是对其进一步封装,将它带入...【详细内容】
2021-06-25  爱分享Coder    Tags:Vue   点击:(28)  评论:(0)  加入收藏
JQuery是一套Javascript脚本库.使用JQuery将极大的提高编写javascript代码的效率,让写出来的代码更加优雅,更加健壮. JQuery第一个版本JQuery1.0发布时间是2006年1月,目前最...【详细内容】
2021-06-24  开课吧科科    Tags:Jquery   点击:(18)  评论:(0)  加入收藏
在执行JavaScript代码之前,js引擎首先会对其进行解析和编译。在编译阶段,变量和函数声明被放入内存,这被称为提升(hoisting)。...【详细内容】
2021-06-23  前端小混混  前端先锋  Tags:JavaScript   点击:(24)  评论:(0)  加入收藏
无论使用何种编程语言,代码都需要根据不同的情况对给定的输入做出不同的决定并执行相应的操作。举例来说,在游戏中,如果玩家的生命值是0,游戏就结束了。在气象应用程序中,如果观...【详细内容】
2021-06-18  开课吧科科  今日头条  Tags:JavaScript   点击:(25)  评论:(0)  加入收藏
在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式的图片。针对这个问题,我们会想到通过 input 元素的 accept...【详细内容】
2021-06-10    掘金  Tags:JavaScript   点击:(43)  评论:(0)  加入收藏
最近在工作中遇到了一个场景:要做一个静态的网站,里面的内容是由设计编写的.md格式的内容。设计将编好的文档统一放在常用的Google Drive里面,如下图 然后我需要将这些文档下载...【详细内容】
2021-06-09  前端在路上    Tags:Nodejs   点击:(32)  评论:(0)  加入收藏
事件什么是event对象用来获取事件的详细信息:鼠标位置,键盘按键获取鼠标位置:clientXdocument对象:document对象代表当前文档,使用window对象的document属性访问,当浏览器加载文档...【详细内容】
2021-06-08  今白    Tags:javascript   点击:(43)  评论:(0)  加入收藏
Json 和 Xml 的目的是相似的,他们都是将方便理解和易读的方式将复杂数据组织到各种接口和语言中,这种类型的技术当然是不能缺少的,我们通过他们构建数据也能很好的去共享他们,但...【详细内容】
2021-06-04  小小码农Kamily  今日头条  Tags:JSON   点击:(39)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条