浏览器在读取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. 精选10款超酷的HTML5/CSS3菜单

    今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...

  2. php中对象（object）与数组（array）之间的相互转换

    /** * 数组 转 对象 * * @param array $arr 数组 * @return object */ function array_to_object($arr) { if (gett ...

  3. maven中snapshot快照库和release发布库的区别和作用 (转)

    Maven介绍,包括作用.核心概念.用法.常用命令.扩展及配置 http://www.trinea.cn/android/maven/ 本文来源于铁木箱子的博客http://www.mzone.cc ...

  4. 启动zookeeper时出现的问题

    zkEnv.cmd @echo off REM Licensed to the Apache Software Foundation (ASF) under one or more REM contr ...

  5. app已损坏，打不开。你应该将它移到废纸篓。

    app已损坏,打不开.你应该将它移到废纸篓.(macOS Sierra 10.12) ,打开终端,执行 sudo spctl --master-disable 即可.

  6. 【发包工具】http多线程发包工具

    [发包工具]http多线程发包工具 使用方法:输入地址,发送的内容,线程数,等待时间,每个线程发送的次数,GET/POST请求. 源代码 package com.xmxkkk.httptest; im ...

  7. Mongodb安全认证

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

  8. c#POST请求php接口

    POST请求php接口 /// <summary> /// 指定Post地址使用Get 方式获取全部字符串 /// </summary> /// <param name= ...

  9. PHP＋Oracle Instant Client

    <?php <b>●Oracleとの接続テスト</b> <hr> <?php // Oracleとの接続 $conn = OCILogon(" ...

  10. C#中的Abstract、Virtual、Interface理解

    容易混淆是必须的,都是与继承有关系,并且涉及到override的使用 一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中 ...