实例分析浏览器中“JavaScript解析器”的工作原理
浏览器在读取HTML文件的时候，只有当遇到<script>标签的时候，才会唤醒所谓的“JavaScript解析器”开始工作。
JavaScript解析器工作步骤：
1、“找一些东西”: var、 function、 参数；(也被称之为预解析)
备注：如果遇到重名分为以下两种情况：
- 遇到变量和函数重名了，只留下函数
- 遇到函数重名了，根据代码的上下文顺序，留下最后一个
2、逐行解读代码。
备注：表达式可以修改预解析的值
JS解析器在执行第一步预解析的时候，会从代码的开始搜索直到结尾，只去查找var、function和参数等内容。一般把第一步称之为“JavaScript的预解析”。而且，当找到这些内容时，所有的变量，在正式运行代码之前，都提前赋了一个值：未定义；所有的函数，在正式运行代码之前，都是整个函数块。
实例分析：
实例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> alert(a); </script> </head> <body> </body> </html>
这段代码运行后，浏览器会报错。
原因：由于，“JavaScript解析器”在解析JS代码时，未找到var、function、参数等其中的任何一个，所以，当逐行执行代码时，因为在“仓库”中找不到a，不认识a，就会报错。
实例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> alert(a); var a = 1; </script> </head> <body> </body> </html>
这段代码运行后，浏览器会弹出”undefined”。
原因：由于，“JavaScript解析器”在解析JS代码时，找到var关键字，然后得知有一个变量a，所以会给a默认赋值一个undefined值，存入“仓库”中，所以，当逐行执行代码时，找到变量a，因为此时的a的值为undefined，所以弹出的值为undefined。
实例三：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var a = 1; alert(a); </script> </head> <body> </body> </html>
这段代码运行后，浏览器会弹出数字“1”。
原因：由于，“JavaScript解析器”在解析JS代码时，找到var关键字，然后得知有一个变量a，所以会给a默认赋值一个undefined值，存入“仓库”中，在逐行执行代码时，先找到变量a，此时的a的值为undefined，当执行到var a= 1 这行代码时，a得到了一个新的赋值“1”所以弹出的值为数字“1”。
实例四：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert(a);
var a = 1;
alert(a);
function a () {
alert(2);
}
alert(a);
var a = 3;
alert(a);
function a () {
alert(4);
}
alert(a);
</script>
</head>
<body>
</body>
</html>
这段代码运行后，弹出值的顺序依次为：function a () {alert(4);}、1、1、3、3
原因：由于，“JavaScript解析器”在逐行解析代码时，先找到var关键字，然后得知有一个变量a，所以会给a默认赋值一个undefined值，存入“仓库”中，然后，继续向下解析代码，当找到function a () {alert(2);}时，根据“函数和变量重名，保留函数”的规则，此时的a变为function () {alert(2);}，再继续向下找，当找到变量a的时候，不变，仍继续向下找，当找到函数function () {alert(4);}时，根据“函数重名上下文”原则，替换为function () {alert(4);}，最终a被赋值为function () {alert(4);}，存到“仓库”中，当逐行执行代码时，执行到第一个alert(a)时，将会弹出“function () {alert(4);}”，接着向下执行，当执行到a=1时，由于表达式可以改变预解析的值，所以此时的a变为1，执行到第二个alert(a)时，弹出值为1，当执行到function a () {alert(2);}时，由于此时是一个函数声明，并不会修改a的值，所以执行到第三个alert(a)时，弹出的仍为数字“1”，依次类推，此后将会陆续弹出“3”、“3”。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
对Java中JSON解析器的一些见解
最近在研究JSON,Java中有很多处理JSON的类库,lib-json.sf-json.fastjson还有Jackson Json.第一个就不说了,性能和功能都没有什么亮点. sf-json最大的优点就是随机读取方便.代码很简单: JSONObject json= JSONObject.fromObject(str); 然后读取字段内容: json.getString或者getInt之类的.但是工作效率有待商榷,而且容易出错. 另外sf-json还有个优点就是自动使用unicode编码,当内
-
浅析ASP.NET万能JSON解析器
概念介绍还是先简单说说Json的一些例子吧.注意,以下概念是我自己定义的,可以参考.net里面的TYPE的模型设计如果有争议,欢迎提出来探讨! 1.最简单:{"total":0} total就是值,值是数值,等于0 2. 复杂点{"total":0,"data":{"377149574" : 1}}total是值,data是对象,这个对象包含了"377149574"这个值,等于1 3. 最复杂{"
-
实例分析浏览器中“JavaScript解析器”的工作原理
浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的"JavaScript解析器"开始工作. JavaScript解析器工作步骤: 1."找一些东西": var. function. 参数:(也被称之为预解析) 备注:如果遇到重名分为以下两种情况: 遇到变量和函数重名了,只留下函数 遇到函数重名了,根据代码的上下文顺序,留下最后一个 2.逐行解读代码. 备注:表达式可以修改预解析的值 JS解析器在执行第一步预解析的时候,会
-
深入了解MySQL中索引优化器的工作原理
目录 本文导读 一.MySQL 优化器是如何选择索引的 1.MySQL数据库组成 2.MySQL数据库成本计算 二.MySQL查询成本 三.SELECT 执行过程 总结 本文导读 本文将解读MySQL数据库查询优化器(CBO)的工作原理.简单介绍了MySQL Server的组成,MySQL优化器选择索引额原理以及SQL成本分析,最后通过 select 查询总结整个查询过程. 一.MySQL 优化器是如何选择索引的 下面我们来看这张表,SUB_ODR_ID字段创建了相关的 2 个索引,根据我们前面
-
JavaScript解析机制与闭包原理实例详解
本文实例讲述了JavaScript解析机制与闭包原理.分享给大家供大家参考,具体如下: js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量的名字存到这个词法环境中; 3.同名的时候:函数声明会覆盖变量,下面的函数声明会覆盖上面的同名函数; 4.函数的值为:对函数的一个引用; 变量的值为undefined; 5.如果用函数表达式的方式创建一个函数: va
-
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
本文实例讲述了Python HTML解析器BeautifulSoup用法.分享给大家供大家参考,具体如下: BeautifulSoup简介 我们知道,Python拥有出色的内置HTML解析器模块--HTMLParser,然而还有一个功能更为强大的HTML或XML解析工具--BeautifulSoup(美味的汤),它是一个第三方库.简单来说,BeautifulSoup最主要的功能是从网页抓取数据.本文我们来感受一下BeautifulSoup的优雅而强大的功能吧! BeautifulSoup安装 B
-
JavaScript装饰器的实现原理详解
目录 装饰器的常见作用 装饰类的属性 装饰类 注意 实例应用 最近在使用TS+Vue的开发模式,发现项目中大量使用了装饰器,看得我手足无措,今天特意研究一下实现原理,方便自己理解这块知识点. 装饰器的常见作用 装饰一个类的属性 装饰一个类 装饰器只能针对类和类的属性,不能直接作用于函数,因为存在函数提升. 下面我们针对这两种情况进行举例阐述. 装饰类的属性 function readonly(target, name, descriptor) { discriptor.writable = fa
-
Javascript对象及Proxy工作原理详解
正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,
-
浅谈Vue3中key的作用和工作原理
这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes: 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法 而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除/销毁 key 不存在的元素. 先简单提一下我对VNode的理解: VNode的全称是Virtual Node,也就是虚拟节点: Vnode的本质是一个JavaScri
-
通过代码实例解析PHP session工作原理
这里的介绍主要是基于php语言,其他的语言操作可能会有差别,但基本的原理不变. 1.在php中如何操作session: session_start(); //使用该函数打开session功能 $_SESSION //使用预定义全局变量操作数据 使用unset($_SESSION['key']) //销毁一个session的值 简单地操作,一切都是由服务器实现:由于处理在后台,一切看起来也很安全.但是session采用什么样机制,又是怎样被实现,并且如何来保持会话的状态的呢? 2.session实
-
通过实例解析布隆过滤器工作原理及实例
布隆过滤器 布隆过滤器是一种数据结构,比较巧妙的概率型数据结构(probabilistic data structure),特点是高效地插入和查询,可以用来告诉你 "一定不存在或者可能存在". 相比于传统的 List.Set.Map 等数据结构,它更高效.占用空间更少,但是缺点是其返回的结果是概率性的,而不是确切的. 布隆过滤器的工作原理 假设一个长度为m的bit类型的数组,即数组中每个位置只占一个bit,每个bit只有两种状态:0,1,所有bit的初始状态都为0. 再假设一共有k个哈
-
深度剖析Java中的内存原型及工作原理
本文主要通过分析Java内存分配的栈.堆以以及常量池详细的讲解了其的工作原理. 一.java虚拟机内存原型 寄存器:我们在程序中无法控制栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中堆:存放用new产生的数据静态域:存放在对象中用static定义的静态成员常量池:存放常量非RAM存储:硬盘等永久存储空间. 二.常量池(constant pool) 常量池指的是在编译期被确定,并被保存在已编译的.class文件中的一些数据.除了包含代码中所定义的各种基本类型(如int.