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 = 1;
    </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 = 1;
        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 = 1;
        alert(a);
        function a () {
            alert(2);
        }
        alert(a);
        var a = 3;
        alert(a);
        function a () {
            alert(4);
        }
        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

时间: 2024-10-19 22:14:37

javascript解析器原理的相关文章

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

转自zsq 1.DOM     DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作.由于它是基于信息层次的,因而 DOM 被认为是基于树或基于对象的.DOM 以及广义的基于树的处理具有几个优点.    首先,由于树在内存中是持久的,因此可以修改它以便应用程序能对数据和结构作出更改.它还可以在任何时候在树中上下导航,而不

javascript解析器(引擎)

The JavaScript interpreter in a browser is implemented as a single thread. javascript 引擎在浏览器中作为单线程实现. javascript解析器(引擎),码迷,mamicode.com

大家都懂的 JSON 解析器原理(一)简介 & 低配版入门

没学过编译原理,做一个 JSON 解析器难吗?--难!是不是就不能"迎难而上"呢?--不是!越是难的越是一个挑战!--笔者这里尝试通过通俗易懂的行文为大家介绍一下 JSON 解析器,--那一串串长长的 JSON 文本到底是如何被解析成为 Java 里面"可以理解的"对象的.前面的铺垫可能比较长,但请尽量不要跳过,因为那都是基础,尤其对于我们非科班来说,应要恶补.当然,为照顾大家的理解程度(包括我自己,我也会以后回看自己的代码,以此反复理解.反复消化),我会把代码写多

JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript 是如何工作的:深入V8引擎&编写优化代码的5个技巧! JavaScript 是如何工作的:内存管理+如何处理4个常见的内存泄漏 ! JavaScript 是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! JavaScript 是如何工作的:

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

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

Atitit。Tree文件解析器的原理流程与设计实现&#160;&#160;java&#160;&#160;c#&#160;php&#160;js

Atitit.Tree文件解析器的原理流程与设计实现  java  c# php js 1. 解析原理与流程1 1.1. 判断目录  ,表示服  dirFlagChar = "└├─";1 1.2. 剑豪制表符出现的位置与文件夹级别对应表1 1.3. 主要判读流程2 2. Tree结果2 3. Code----3 4. 结果5 1. 解析原理与流程 1.1. 判断目录  ,表示服  dirFlagChar = "└├─"; 其中-类似于剑豪的制表符是表示目录的..够

javascript编写自己的模板解析器

编写自己的模板解析器 因为最近在研究artTemplate,ejs,baaiduTemplate等模板,所以,一时兴起,自己也写了个简单的模板解析器. 一个最基本的模板解析器,需要有什么功能呢? 读取变量值 解析模板语句 按照这个思路,我们编写一个简单的解析器,需求如下: 读值: <%= 变量名 %> 语句支持: <% if( type == 1 ){ %> good! <%}%> 总体来说,就是如果模板如下: 我叫:<%= name %> <br/&

&lt;JavaScript语言精粹&gt;JSON解析器源码阅读

1 // 这是一个用JavaScript编写JSON解析器的实现方案: 2 var jsonParser = (function() { 3 // 这是一个能把JSON文本解析成JavaScript数据结构的函数. 4 // 它是一个简单的递归降序解析器. 5 // 我们在另一个函数中定义此函数,以避免创建全局变量. 6 7 var at, // 当前字符索引 8 ch, // 当前字符 9 escapee = { 10 '"': '"', 11 "\\": &qu

Vue双向绑定的实现原理系列(四):补充指令解析器compile

补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTIO