javascript解析器原理
浏览器在读取HTML文件的时候，只有当遇到<script>标签的时候，才会唤醒所谓的“JavaScript解析器”开始工作。
JavaScript解析器工作步骤
1. “找一些东西”: var、 function、 参数：(也被称之为预解析)
备注：如果遇到重名分为以下两种情况：
(1) 遇到变量和函数重名了，只留下函数
(2) 遇到函数重名了，根据代码的上下文顺序，留下最后一个
2. 逐行解读代码
备注：表达式可以修改预解析的值
JS解析器在执行第一步预解析的时候，会从代码的开始搜索直到结尾，只去查找var、function和参数等内容，一般把第一步称之为“JavaScript的预解析”,而且，当找到这些内容时，所有的变量，在正式运行代码之前，都提前赋了一个值：未定义(undefined)，所有的函数，在正式运行代码之前，都是整个函数块
示例1
<!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，就会报错
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert(a);
var a = ;
</script>
</head>
<body> </body>
</html>
这段代码运行后，浏览器会弹出”undefined”。
原因：由于，“JavaScript解析器”在解析JS代码时，找到var关键字，然后得知有一个变量a，所以会给a默认赋值一个undefined值，存入“仓库”中，所以，当逐行执行代码时，找到变量a，因为此时的a的值为undefined，所以弹出的值为undefined。
示例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a = ;
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 = ;
alert(a);
function a () {
alert();
}
alert(a);
var a = ;
alert(a);
function a () {
alert();
}
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”。
转自：http://www.cnblogs.com/webhome/p/6164245.html
javascript解析器原理的更多相关文章
- 浏览器中“JavaScript解析器”工作原理
浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...
- JS-YAML -YAML 1.2 JavaScript解析器/编写器
下载 JS-YAML -YAML 1.2 JavaScript解析器/编写器JS-YAML -YAML 1.2 JavaScript解析器/编写器 在线演示 这是YAML的实现,YAML是一种对人友好 ...
- XML的四种解析器原理及性能比较
转自zsq 1.DOM DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分 ...
- 简单介绍下各种 JavaScript 解析器
作者:沧海 各种js解析器是前端工程化的基石,可以说如果没有它,很多工程化都无法正常执行,我们每天用到的babel.webpack.eslint.TypeScript背后都需要一套对应的js解析器,今 ...
- javascript解析器（引擎）
The JavaScript interpreter in a browser is implemented as a single thread. javascript 引擎在浏览器中作为单线程实现 ...
- JavaScript的工作原理：解析、抽象语法树（AST）+ 提升编译速度5个技巧
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- DRF频率、分页、解析器、渲染器
DRF的频率 频率限制是做什么的 开放平台的API接口调用需要限制其频率,以节约服务器资源和避免恶意的频繁调用. 频率组件原理 DRF中的频率控制基本原理是基于访问次数和时间的,当然我们可以通过自己定 ...
- spring类扫描注入-----类扫描的注解解析器
通过类扫描注入到容器中,这种方式,在实际开发中还是很常用的,可以看下自己的配置文件,就会发现,自己公司的项目,搞不好就是这么注入的. 起码,我发现我公司的项目就是这么干的. 下面来演示一下简单的例子: ...
- 高性能JavaScript模板引擎原理解析
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...
随机推荐
- js 跨域 Jquery取得iframe中元素的几种方法
http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...
- php中的func_num_args、func_get_arg与func_get_args函数
From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/09/21/2183157.html php的的func_num_args.f ...
- adb错误：Failed to execute android command 'adb devices'.
好吧,我是用的phonegap3.0开发的,很简单,安装的时候一句phonegap run android –device就可以了(-device参数非必要,我是为了不跑模拟器,加上此参数限制只跑到设 ...
- pytest集成Allure Report
https://blog.csdn.net/liuchunming033/article/details/79624474#commentBox https://blog.csdn.net/lihua ...
- 【DL】几种参数优化方法的比较
https://zhuanlan.zhihu.com/p/22252270 结尾的两张图不能更赞. PS:在用lstm做文本分类的时候,加了L2正则,把optim方法由之前的SGD换成Adam,效果提 ...
- python06 深浅拷贝原理
preface 这里主要说深浅拷贝的原理.首先说说数字与字符串作为内存对象的重用,请看代码: a1=12345 b1=12345 a2=a1 print(id(a1),id(b1),id(a2)) 打 ...
- 如何在Java 环境下使用 HTTP 协议收发 MQ 消息
1. 准备环境在工程 POM 文件添加 HTTP Java 客户端的依赖. <dependency> <groupId>org.eclipse.jetty</groupI ...
- Linux安装bundle
安装bundle文件的方法: cd 到文件目录再用sudo chmod +x XXXXXXX.bundle 加权限最后 ./XXXXXXXX.bundle 就行了. 第一步:sudo chmod +x ...
- linux环境中,read命令的使用?
需求描述: 今天有一个需求主要是从一个文件中夺取内容,文件中每行呢又是有多个字段,中间通过空格来分隔的.那么这样的话,就是用到了read命令 在这里记录下read的使用方法. 命令说明:read命令就 ...
- golang 内存分析/动态追踪
如果你的go程序是用http包启动的web服务器,你想查看自己的web服务器的状态.这个时候就可以选择net/http/pprof.你只需要引入包_"net/http/pprof" ...