浏览器在读取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. Springmvc 的post请求的json格式参数

    背景: 这两天在项目中遇到了一个问题.我的环境是springmvc4.1.9,写了几个可以用ajax请求的接口(ajax.jsonp 调用正常).突然一时兴起就用 HTTP 请求的工具(比如火狐浏览器 ...

  2. php 变量定义方法

    1.定义常量define("CONSTANT", "Hello world."); 常量只能包含标量数据(boolean,integer,float 和 str ...

  3. 内存与cpu的关系

    CPU是负责运算和处理的,内存是交换数据的.当程序或者操作者对CPU发出指令,这些指令和数据暂存在内存里,在CPU空闲时传送给CPU,CPU处理后把结果输出到输出设备上,输出设备就是显示器,打印机等. ...

  4. java 坑

    时间戳 unix的时间戳和java中的是不同的.unix为10位,java的13位.需要进行转换. long timestamps = 1509783992L; long javaTimstamps ...

  5. mocha框架下，异步测试代码错误造成的问题----用例超时错误

    今天用抹茶(mocha)做个测试,发现有一个测试项目总是超时: describe("DbFactory functions",function(){ it("query ...

  6. php把数组、字符串 生成文件

    生成的代码 data/ss.php <?php return array ( ', ', ); php代码 $str = "<?php\nreturn \n"; $my ...

  7. UITextField禁用掉编辑之后...

    某些UITextField只为了摆数据,还有响应点击,为了避免频繁出现键盘,所以把UITextField的人机交互(userInteractionEnabled)给关闭了 此时,给UITextFiel ...

  8. ubuntu14.04 允许root用ssh登录

    重启ssh service ssh restart 查看ssh是否已安装 ssh进程 ps -e | grep ssh ssh占用端口 lsof -i:22 ssh服务已启动,但是用root账号无法连 ...

  9. linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?

    需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...

  10. Mongodb安全认证

    Mongodb安全认证在单实例和副本集两种情况下不太一样,单实例相对简单,只要在启动时加上 --auth参数即可,但副本集则需要keyfile. 一.单实例 1.启动服务(先不要加auth参数) 2. ...