zoukankan      html  css  js  c++  java
  • js解析器的执行原理

    首先看一段代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <span>我是span</span>
            <script type="text/javascript">
               alert(cnt);
                var cnt=60;
                function huoqu(){
                   
                }
                
            </script>
        </body>
    </html>    

    代码的执行顺序是从上往下的,当代码执行到script标签时,也就开始执行js代码了。

    执行js代码一般分两步:1.预解析代码。   2.逐行执行代码。

    第一步:预解析代码

    预解析代码呢,主要会把var , function , 参数等一些东西 存储进仓库里面(内存)。

    1.var 一般用于声明变量,预解析代码的时候,等号后面的赋值过程不会执行,所以预解析时的var 变量 都是未定义的。

    2,.function 函数呢,预解析的时候,值就是函数里面的内容。

    当变量和函数重名时:就只留下函数的值,不管顺序谁前谁后。所以函数的优先级比变量高。注意:这只是预解析。

    当函数和函数重名时:会留下后面那个,会遵循上下文机制。

    第二步:逐行执行代码

    当预解析完成之后,就开始逐行执行代码了,全部代码都会完整的执行。

    实例:下面的alert分别会弹出什么值

     1 <script>
     2    alert(a);
     3    var a=1;
     4    function a(){alert(2);}
     5    alert(a);
     6    var a=3;
     7    alert(a);
     8    function a(){alert(4);}
     9    alert(a);
    10 </script>

    第一步:预解析

    上面说过,预解析时只会把var , function ,参数等存储起来,所以:

    执行到第二行时,a 的值是未定义。

    执行到第四行时,a 的值是函数本身,也就是function a(){alert(2);}。

    执行到第六行时,a 的值还是第四行时的值,也就是function a(){alert(2);},因为函数的优先级比变量高。

    执行到第八行时,a 的值就变成了function a(){alert(4);} ,因为当两个函数重名时,遵循代码从上往下执行。

    第二步:代码逐行执行

    预解析完成之后,就是代码逐行执行了,

    第二行:会弹出function a(){alert(4);} ,因为预解析完成之后,被存进内存的a 的值就是function a(){alert(4);}

    第三行:第三行里有表达式,a 被赋了一个新的值1  表达式会改变变量的值。表达式可以改变预解析的值。

    第四行:只是函数的声明,并没有用到表达式,而且也没有函数的调用,所以不会改变a 的值。

    第五行:因为a 的值没有变化,所以还是1

    第六行:使用了表达式,a 被赋了一个新的值3

    第七行:会弹出3

    第八行:函数的声明,不会改变a 的值。

    第九行:a的值没有改变,所以还是3

    最后结果为:

    <script>
     2    alert(a);//弹出function a(){alert(4)}
     3    var a=1;
     4    function a(){alert(2);}
     5    alert(a);//弹出1
     6    var a=3;
     7    alert(a);//弹出3
     8    function a(){alert(4);}
     9    alert(a);//弹出3
    10 </script>

     

  • 相关阅读:
    yum 在线安装LAMP
    python-scrapy-增量式
    python-scrapy-分布式爬取
    python-scrapy-全站数据爬取-CrawlSpider
    python-scrapy-中间件的学习
    python-scrapy深度爬取
    python-scrapy环境配置
    django DOM
    window10设置环境变量(以设置虚拟环境和SQL为例)
    加入园子啦
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/7599637.html
Copyright © 2011-2022 走看看