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 ...
随机推荐
- linux nginx，php开机启动
nginx开机启动 1.首先,在linux系统的/etc/init.d/目录下创建nginx文件 vim /etc/init.d/nginx 2.加入脚本 #!/bin/bash # nginx St ...
- 【RespberryPi】数码管
http://blog.mangolovecarrot.net/2015/06/03/raspi-study0801/ 应该可以用两块74HC595来驱动显示8位数的数码管.
- mint-ui loadmore组件注意问题
loadTop(){ this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size}); this.$refs ...
- 续：纠正：debian【4】可以安装，而且完美的安装 ！ for《Oracle-10.2.0.1，打补丁10.2.0.5：在 debian 版本4【不含4】以上，及 ubuntu 7.04【不含7.04】以上都可以安装！》
关键点: ip a ifconfig -a dhclient ifconfig -a poweroff ip a ifconfig -a apt-get update apt-get install ...
- phpstorm 初体验
最近在学php,今天想要读一下公司刚外包网站的源代码,要安装一个php的集成环境,因最开始用过JetBrains的pycharm觉得很好用,这会儿还选用该家产品PHPStorm(为啥storm这个词, ...
- JVM垃圾回收机制之引用类型
一:引用的类型 javac编译器编译源文件后,生成字节码文件,在类加载器加载字节码文件到内存中时,在内存中开辟 空间,栈.堆以及方法区,来存放对象以及引用.引用可以分为四种: 强引用:平常我们在编写程 ...
- 修改ftp服务的监听端口
需求说明: 今天在做一个项目的时候,低端的端口都给屏蔽掉了,需要进行修改为高端端口才能访问,在此记录下. 操作过程: 1.修改ftp的配置文件vsftpd.conf,增加以下的配置 listen_po ...
- go fmt格式化----“占位符”
https://studygolang.com/articles/2644 https://studygolang.com/static/pkgdoc/pkg/fmt.htm
- Office2007打开文件提示“您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致”的解决办法
添加如下注册表 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Excel ...
- Layui：设置select下拉框自动选中某项
1.问题:layUI,在做编辑功能有下拉框数据时,需要初始化选中某个值,layUI官网没有相关api,可能我比较笨没找到 2.解决思路:出发点击事件 3.分析dom树结构,出发dl点击事件 方法: v ...