• javascript预编译的过程


    预编译的两种情况

    全局:

    1.全局 直接是script标签中的代码,不包括函数执行
    执行前:
    1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析
    2.分析变量声明,变量名为属性名,值为undefined
    3.分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖

    函数内部(局部):

    1. 函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO

    a.  函数执行前的一瞬间,生成AO活动对象
    b. 分析参数,形参作为对象的属性名,实参作为对象的属性值
    c.  分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变
    d. 1.4 分析<b>函数声明</b>,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖

    2. 逐行执行。

    代码分析如下:

    <script type="text/javascript">
      console.log(a);
      console.log(b)
      var a = 100;
      console.log(a)
      var b = 200
      var c = 300
      function a(){
      }
      function fun(){
      }
      console.log(a);
    </
    script>

    全局 直接是script标签中的代码,不包括函数执行

    执行前:

    1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析


    GO = {
    自带的属性都不写
    }


    2.分析变量声明,变量名为属性名,值为undefined


    GO = {
    a : undefined,
    b : undefined,
    c : undefined
    }


    3.分析<b>函数声明</b>,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖


    GO = {
    a : function a(){},
    b : undefined,
    c : undefined,
    fun : function fun(){}
    }

    此时,GO就是预编译完成的最终对象,词法分析结束


    4.逐行执行,分析过(变量声明,函数声明)不用管了,只管赋值(变量赋值)
    11行的时候,a赋了一次值,值改变为100


    GO = {
    a : 100,
    b : undefined,
    c : undefined,
    fun : function fun(){}
    }

    局部

    <script type="text/javascript">
        var num = 100;
        function fun(num){
            console.log(num)
        }
        fun(5)
        fun(10)
    </script>

    1.预编译的时候

    GO = {
    num : undefined,
    fun : function
    }

    2.执行过程

    走到9行

    GO = {
    num : 100,
    fun : function
    }


    走到14行,函数的调用


    3.函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
    3.1 函数执行前的一瞬间,生成AO活动对象


    fun.AO = {

    }


    3.2 分析参数,形参作为对象的属性名,实参作为对象的属性值


    fun.AO = {
    num : 5
    }


    3.3 分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变


    fun.AO = {
    num : 5
    }


    3.4 分析函数声明,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖

    4.逐行执行

    综合分析:

    <script type="text/javascript">
         console.log(test);
         function test(test){
             console.log(test);
             var test = 123;
             console.log(test);
             function test(){ 
             }
             console.log(test);
             var test = function(){}
             console.log(test);
         }
         test(10);
         var test = 456
         console.log(test);
     </script>

    预编译开始,先生成一个GO{

    }

    1.看变量GO{

    test:underfined

    }

    2.看函数声明GO{

    test:function test(test){

    console.log(test);
    var test = 123;
    console.log(test);
    function test(){

    }
    console.log(test);
    var test = function(){}
    console.log(test);
    }

    }

    把整个函数体给test

    预编译完成,开始执行代码,第二行的结果是test函数的函数体

    3到13行都是函数声明,不用管

    第14行函数执行,传入参数10

    函数执行的时候产生AO{

    }

    1.看参数AO{

    test:10

    }

    2.看变量,变量同名,不用管变量AO{

    test:10

    }

    3.看函数,函数和参数同名,函数把参数覆盖AO{

    test:function test(){}

    }

    4.逐行执行

    第三行打印名字为test的函数体,

    第四行给test赋值123,第五行打印123

    7到9行函数体声明不用管

    第十行打印123

    第十一行把一个匿名函数(没有函数名的函数)赋值给test

    第十二行函数执行完毕

    第十四行回到全局,把456赋值给test

    第十五行打印456

  • 相关阅读:
    Caveat,bug,DDTS
    思科WLC如何实现WEB无感知认证?
    Cat9100 AP的注意事项!
    Docker基本操作命令
    基于Docker Toolbox部署PXC集群(三)Navicat连接Docker中的MySql实例
    MySql自带压力测试工具mysqlslab
    基于Docker Toolbox部署PXC集群(一)基本概念【转】
    基于Docker Toolbox部署PXC集群(二)PXC安装及节点配置
    使用Outlook EWS获取会议及会议室信息
    Tag镜像时默认为latest版本问题
  • 原文地址:https://www.cnblogs.com/xuxiaoyu/p/10133373.html
Copyright © 2020-2023  润新知