zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    从零开始入门 K8s | 应用编排与管理
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    203. Remove Linked List Elements
    183. Customers Who Never Order
    182. Duplicate Emails
    181. Employees Earning More Than Their Managers
    1261. Find Elements in a Contaminated Binary Tree
    1260. Shift 2D Grid
  • 原文地址:https://www.cnblogs.com/sunfie/p/6972273.html
Copyright © 2011-2022 走看看