浏览器在读取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解析器原理的更多相关文章

  1. 浏览器中“JavaScript解析器”工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...

  2. JS-YAML -YAML 1.2 JavaScript解析器/编写器

    下载 JS-YAML -YAML 1.2 JavaScript解析器/编写器JS-YAML -YAML 1.2 JavaScript解析器/编写器 在线演示 这是YAML的实现,YAML是一种对人友好 ...

  3. XML的四种解析器原理及性能比较

    转自zsq 1.DOM     DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分 ...

  4. 简单介绍下各种 JavaScript 解析器

    作者:沧海 各种js解析器是前端工程化的基石,可以说如果没有它,很多工程化都无法正常执行,我们每天用到的babel.webpack.eslint.TypeScript背后都需要一套对应的js解析器,今 ...

  5. javascript解析器（引擎）

    The JavaScript interpreter in a browser is implemented as a single thread. javascript 引擎在浏览器中作为单线程实现 ...

  6. JavaScript的工作原理：解析、抽象语法树（AST）+ 提升编译速度5个技巧

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  7. DRF频率、分页、解析器、渲染器

    DRF的频率 频率限制是做什么的 开放平台的API接口调用需要限制其频率,以节约服务器资源和避免恶意的频繁调用. 频率组件原理 DRF中的频率控制基本原理是基于访问次数和时间的,当然我们可以通过自己定 ...

  8. spring类扫描注入-----类扫描的注解解析器

    通过类扫描注入到容器中,这种方式,在实际开发中还是很常用的,可以看下自己的配置文件,就会发现,自己公司的项目,搞不好就是这么注入的. 起码,我发现我公司的项目就是这么干的. 下面来演示一下简单的例子: ...

  9. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

随机推荐

  1. u3d中 rect[2] == rt->GetGLWidth() && rect[3] == rt->GetGLHeight()错误的原因及解决方法

    原文:http://blog.csdn.net/wolf96/article/details/38363161 官方是这么解释的 http://issuetracker.unity3d.com/iss ...

  2. git恢复本地删除的文件夹取消增加的文件

    git项目中有时候会在本地增加或者删除了一些文件或者文件夹,但是又不想提交,一般情况下,我们取消本地所有修改: git checkout . 取消指定文件修改: git checkout filena ...

  3. IT部门的“2/8”现状

    专家的研究和大量企业实践表明,在IT项目的生命周期中,大约80%的时间与IT项目运 营维护有关,而该阶段的投资仅占整个IT投资的20%,形成了典型的“技术高消费”.“轻服务.重技术”现象.Gartne ...

  4. Python 多线程相关知识学习

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  5. Reg命令使用详解 批处理操作注册表必备

    首先要说明:编辑注册表不当可能会严重损坏您的系统.在更改注册表之前,应备份计算机上任何有价值的数据 只有在别无选择的情况下,才直接编辑注册表.注册表编辑器会忽略标准的安全措施,从而使得这些设置会降低性 ...

  6. SpringBoot------热部署(Springloaded)

    为啥要热部署: 在修改代码的时候,不需要重新启动程序,程序会自动进行编译 注意: 控制器中新增加的方法是不能进行热部署的 方法: 1.在pom.xml文件里面添加下面代码 <project> ...

  7. Python中的类（上）

    在Python中,可以通过class关键字定义自己的类,然后通过自定义的类对象类创建实例对象. 例如,下面创建了一个Student的类,并且实现了这个类的初始化函数"__init__&quo ...

  8. MySQL on Linux 部署手册

    1. 背景 MySQL为开源数据库,因此可以基于源码实现安装.基于源码安装有更多的灵活性.也就是说我们可以针对自己的硬件平台选用合适的编译器来优化编译后的二进制代码,根据不同的软件平台环境调整相关的编 ...

  9. 查看本地RF版本号

    在CMD下执行:pybot --version

  10. Nginx（六）-- 配置文件之Gzip

    1.概念及作用 Gizp主要对内容.静态文件做压缩,用来提升网站访问速度,节省带宽. 2.使用方法 gzip既可以配置在server中,也可以配置在server外,此处配置在server中,如下:   ...