浏览器在读取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. 由SecureCRT命令行快捷键谈学习思想

    由学习linux SecureCRT命令行常用快捷键开始谈起! 1)老男孩说,抓重点(重点非难点) 任何一个领域.学科,任何一个职位.工作,都有学不完的知识,优秀的学生总能抓住重点去学习,如果泛泛的去 ...

  2. 定时任务quartz与spring的集成

    我想要在spring的集成框架中使用spring , 暂时采用quartz 根据下面的几篇博客实现了(懒得说了,直接丢链接): Quartz实现动态定时任务 Spring 3整合Quartz 2实现定 ...

  3. AOP-配合slf4j打印日志

    基本思想 凡在目标实例上或在目标实例方法(非静态方法)上标注自定义注解@AutoLog,其方法执行时将触发AOP操作: @AutoLog只有一个参数,用来控制是否打印该方法的参数和返回结果的json字 ...

  4. Android OpenGL ES 离屏渲染（offscreen render）

    通常在Android上使用OpenGL ES,都是希望把渲染后的结果显示在屏幕上,例如图片处理.模型显示等.这种情况下,只需要使用Android API中提供的GLSurfaceView类和Rende ...

  5. SharePoint 使用ECMAscript对象模型来操作Goup与User

    这里总结了关于使用ECMAscript对象模型来操作Goup与User的常用情况,内容如下:     1.取得当前Sharepoint网站所有的Groups     2.获取当前登录用户的Title与 ...

  6. LinuxMint下的Orionode源码安装

    1. Orionode介绍 Eclipse-orion是Eclipse项目下面的一个子项目,orion是一个在在线版的代码编辑环境.其介绍参考http://wiki.eclipse.org/Orion ...

  7. sql server 2005 怎么看是不是企业版

    已经安装了SQL server 2005 怎么确定它是企业版 还是标准版??? 执行sql:SELECT @@VERSION在结果里看,比如我这里是(里面有Enterprise Edition,表示企 ...

  8. 视觉单词模型、词袋模型BoW

    多用于图像检索.分类 3.2.1.4 视觉单词模型 视觉词袋(BoVW,Bag of Visual Words)模型,是“词袋”(BoW,Bag of Words)模型从自然语言处理与分析领域向图像处 ...

  9. javascript的闭包计数器实现，python实现各种方法来实现计数器

    菜鸟教程的javascript闭包章节中,演示了js计数器的实现.    教程地址 http://www.runoob.com/js/js-function-closures.html 代码1 var ...

  10. spray json, jackson 转到type时多key和少key的比较

    有组合关系的三个class定义 A { B { C {...} ... } ... } 每个class都有loadFromJson和writeAsJson方法.过去几年,三个class里的成员变量一直 ...