前端学习——02——js预编译过程详解易懂附代码

已于 2022-05-30 18:59:51 修改
阅读量713 收藏
点赞数 1
分类专栏： 三大基础语言 文章标签： 前端 javascript 学习
于 2019-05-15 20:46:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/90243049
版权

目录

 一：预编译前奏

二：函数体系内的预编译

三：全局的预编译

四：例题

赋值一定是自右向左的，所以是先把123赋给b，再把b赋给a，b是未经声明的，所以全局能访问到b，a是局部变量所以访问不到

 

 

二：函数体系内的预编译

函数执行的前一刻生成AO,GO是一开始就有的

​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
      <!-- //js运行三部曲

      一：语法分析
      二：预编译：发生在函数执行的前一刻
            预编译前奏：  window 就是全局的域
            1：imply global:暗示全局变量，即任何变量，如果变量未经声明就赋值，此变量就归全局对象所有,全局对象是window 如： a=10; ==> window.a=10;
            2：一切声明的全局变量(在函数中则不是全局变量)，全是window的属性。注意：只有全局的才能归window所有，局部的不行
                var a=123;==>window.a=123;
            预编译四部曲：预编译发生在函数执行的前一刻
            1：创建AO对象 Activation Object(执行期上下文)  AO{}
            2:找函数里的形参和变量声明，将变量和形参名作为AO属性名，值为undefined AO{
                  例1： 
                  a:undefined
                  b:undefined
            }
            3:将实参值和形参统一  形参a变为1
            4：在函数体里面找函数声明。值赋予函数体  a和d都是函数声明 b是函数表达式
            


            以上四个步骤以例一为例   
               1:创建AO作用域
               AO{
                     
               }
               2:AO{
                       a:undefined
                       b:undefined
               }
               3:AO{
                     a:1;
                     b:undefined
               }
               4:AO{
                     a: function a(){}
                     b:undefined
                     d: function d(){}
                     
               }
         
//函数声明是 funtion b(){}
//函数表达式是 var b=funtion (){}
//函数声明整体提升： 函数声明不管写到哪里，系统总是会把函数提到逻辑最前面
//变量 声明提升 ：赋值不提升，var a会提到前面(预编译执行),就是预编译过程中var a的声明已经看过了。
                 但是赋值是在解释执行的时候赋值的。解释执行时不再看预编译的内容
       三：解释执行  -->
<script type="text/javascript">
       //解释执行代码
      
      //例1：
       function fn(a){
             console.log(a);//输出function a(){}
              var a=123;
              //AO{
            //           a:123
            //          b:undefined,
            //          d:function d(){}

            //  }
             console.log(a);//输出123
             function a(){}//预编译已经看过的地方不再看了
             console.log(a);//输出123
             var b=function (){}//预编译已经看过的地方不再看了
              //AO{
            //           a:123
            //          b:function (){}
            //          d:function d(){}

            //  }
             console.log(b);//输出function (){}
             function d(){}
       }
       fn(1);


       //例2:
       function test(a,b){
             console.log(a);//1
             c=0;
             var c;
             a=3;
             b=2;
             console.log(b);//2
             function b(){}
             function  d(){}
             console.log(b);//2
       }
       test(1);
       //第二步
      //  AO{
      //        a:undefined
      //        b:undefined
      //        c:undefined
      //  }
       //第三，四步：
      //  AO{
      //        a:1
      //        b:function b(){}
      //        c:undefined
      //        d:function d(){}
      //  }
       
      // 例3:
      function test(a,b){
            console.log(a);//function (){}
            console.log(b);//undefined
            var b=234;
            console.log(b);//234
            a=123;
            console.log(a);//123
            function a(){}
            var a;
            b=234;
            var b=function(){}
            console.log(a);//123
            console.log(b);//function(){}
      }
      test(1);
      
     
</script>
</head>
<body>
    
</body>
</html>

​

三：全局的预编译

未经声明的变量都会提升到全局变量

 

 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <!-- 
            例1：生成了一个GO对象Global Object
           除了没有实参形参,其他步骤和函数体系内预编译过程是相同的
      GO{
              a:undefined->function(){}
        }  
        GO===window
      -->
        
  <!-- 例1：生成了一个GO对象Global -->
    <script>
          var a=123;
          function a(){} 
          console.log(a);
    </script>
    <!-- //例2： -->
    
    <script>
      //     GO{
      //            b:123;
      //     }
          function test(){
                var a=b=123;//没有声明b,从右至左顺序执行的
                console.log(b);
          }
          test();
      //     AO{
      //           a:undefined
      //     }
    </script>

      <!-- 例3： -->
<script>
      // GO{
      //       test:undefined->函数体function test(test){...}
      // }
           console.log(test);//输出function test(test){...}
           function test(test){//提升了不看了，下一步执行函数再创建AO再执行这里
            console.log(test);//输出function test(){}
             var test=234;
             console.log(test);//输出234
             function test(){}
             }     
             test(1);
             var test=123;
      //     AO{
      //           test:undefined->1->function test(){}
      //     }
   
</script>
                     <!-- 例4： -->
             <script>
                  //  GO{
                  //        global:undefined          GO{ 
                  //                                     global:100
                  //                            ->       fn:function fn(){...}
                  //   }                               }
                         
                   
                   var global=100;
                   function fn(){
                         console.log(global);//先上AO上找，没有，再去GO上找
                   }
                   fn();
                  //  AO{
                  //       空的

                  //  }
             </script>


                   <!--例5  -->
                   <script>
                        //  GO{
                        //        global:undefined
                        //        fn:fn(){}
                        //  }
                         global=100;
                         function  fn(){
                               console.log(global);//undefined 先找自己AO的
                               global=200;
                               console.log(global);//200
                               var global=300;
                         }
                         fn();
                         var global;
                        //  AO{
                        //        global:undefined

                        //  }

                   </script>

                   <!-- 例6 -->
                  <script>
                        // GO{
                        //       a:undefined
                        //       test:function test(){...}
                        //       c:234
                        // }
                        function test(){
                              console.log(b);//undefined error
                              if(a){ //a=undefined
                                    var b=100;
                              }
                              console.log(b);//undefined
                              c=234;//AO里面没c,添加到GO里去
                              console.log(c);//234
                        }
                        var a;
                        test();//调用函数时开始创建AO
                        // AO{
                        //       b:undefined  不用管if if里的判断不管怎样，都会变量提升
                              
                        // }
                        a=10;
                        console.log(c);//234
                        
                  </script>

                  <!-- 百度笔试题1 -->
                    <script>
                        // GO{
                        //      bar:function bar(){...}

                        // }
                        function bar (){
                              return foo;//相当于console.log(foo)
                              foo=10;
                              function foo(){

                              }
                              var foo=11;
                        }
                        console.log(bar());//foo(){...}
                        // AO{
                        //       foo:foo(){}
                              
                        // }
                  </script>

                   <!-- 百度笔试题2 -->
                   <script>
                        // GO{
                        //       bar:function bar(){...}
                        // }
                        console.log(bar());
                        function bar()
                         {
                               foo=10;
                               function foo(){

                               }
                               var foo=11;
                               return foo;//相当于console.log(foo)
                           }
                           
                        //    AO{
                        //          foo:foo(){}
                        //    }
                   </script>

            <!-- 例7 -->
              <script>         
                 console.log(b);//undefined  b是函数表达式，不是函数
                 var b = function () {}
              </script>

                   <!-- 例8 -->
                   <script>
                        // GO{
                          //       a:undefined->100
                        //       demo:demo(){...}
           
                       //        f:123
                        // }
                         a=100;//a:undefined->100
                         function demo(e){
                               function e(){}
                               arguments[0]=2;//e=2  arguments控制实参，实参第一位改成2
                               console.log(e);//输出2
                               if(a){//a=undefined 不执行if语句
                                     var b=123;
                                     function c(){//if里面不能声明function,在这里只作为练习

                                     }
                               }
                         
                         var c;
                         a=10;
                         var a;
                         console.log(b);//输出undefined
                         f=123;//AO里面没f,添加到GO里去
                         console.log(c);//输出undefined
                         console.log(a);//输出10
                         }
                         var a;
                         demo(1);
                        //  AO{
                        //        e:undefined->1->function e(){}->2
                        //        b:undefined
                        //        c:function c()/undefined
                        //        a:undefined->10
                        //  }
                         console.log(a);//输出100， 全局变量看GO里的
                         console.log(f);//输出123
                   </script>

               
</head>

<body>

      
</body>
</html>

四：例题

1.

 <script>
    /*
    GO{
      a:undefined=>100
      demo:function(){}
      f:un=>123
    }
    */
    a = 100;

    function demo(e) {
      function e() {}
      arguments[0] = 2; //形参列表第一个  和实参相映射 所以e变成2
      console.log(e); //2
      if (a) {//预编译时不看if里的条件，直接将if里的变量放进AO,执行时看if里的条件是否满足，由于a=undefined，所以不执行里面的语句
        var b = 123;

        function c() {}
      }
      var c;
      a = 10;
      var a;
      console.log(b); //un
      f = 123;//AO没有，放进GO里
      console.log(c); //function  由于新语法 函数不能定义再if语句里，所以这里实际打印出来的值时undefined
      console.log(a); //10
    }
    var a;
    demo(1);
    console.log(a); //全局里的a  100
    console.log(f); //123
    /*
    AO{
     e:un=>1=>function=>2
     b:un
     c:function
     a:un=>10
    }
    */
  </script>

2.

 <script>

   function print(){
     console.log(foo);//undefined
     var foo=2;
     console.log(foo);//2
     console.log(hello);//报错
   }
   print()
 
  </script>

 

野生小米椒
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
预编译过程
weixin_45806273的博客
12-21 495
介绍 预编译又称为预处理，是做些代码文本的替换工作。是整个编译过程的最先做的工作。 处理以# 开头的指令 , 比如拷贝 #include 包含的文件代码，#define 宏定义的替换 ， 条件编译等，就是为编译做的预备工作的阶段。 主要处理#开始的预编译指令，预编译指令指示了在程序正式编译前就由编译器进行的操作，可以放在程序中的任何位置。 C 编译系统在对程序进行通常的编译之前，首先进行预处理 ...
c语言编译过程详解，预处理，编译，汇编，链接
02-24
我们在各自的电脑上写下代码，得明白我们代码究竟是如何产生的，不想了解1，0什么的，但这几个环节必须掌握吧。我们的代码会经过这4个环节，从而形成最终文件，c语言作为编译语言，用来向计算机发出指令。让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。预处理展开头文件/宏替换/去掉注释/条件编译（test.imain.i）编译检查语法，生成汇编test.smain.s）汇编汇编代码转换机器码(test.omain.o)链接链接到一起生成可执行程序a.out预处理如锲子中所言，是一种展开，下表是常用的一些预处理命令__LINE__表示正在编译的文件的行号__FILE
MySQL预编译功能详解
12-16
本文为大家分享了MySQL预编译功能，供大家参考，具体内容如下 1、预编译的好处 　　大家平时都使用过JDBC中的PreparedStatement接口，它有预编译功能。什么是预编译功能呢？它有什么好处呢？ 　　当客户发送一条SQL语句给服务器后，服务器总是需要校验SQL语句的语法格式是否正确，然后把SQL语句编译成可执行的函数，最后才是执行SQL语句。其中校验语法，和编译所花的时间可能比执行SQL语句花的时间还要多。 　　如果我们需要执行多次insert语句，但只是每次插入的值不同，MySQL服务器也是需要每次都去校验SQL语句的语法格式，以及编译，这就浪费了太多的时间。如果使用预编译功能
C语言编译过程总结详解
01-19
C语言的编译链接过程要把我们编写的一个c程序（源代码）转换成可以在硬件上运行的程序（可执行代码），需要进行编译和链接。编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程。链接是把目标文件、操作系统的启动代码和用到的库文件进行组织形成终生成可执行代码的过程。过程图解如下： 　　从图上可以看到，整个代码的编译过程分为编译和链接两个过程，编译对应图中的大括号括起的部分，其余则为链接过程。 　　编译过程 　　编译过程又可以分成两个阶段：编译和会汇编。 　　编译 　　编译是读取源程序（字符流），对之进行词法和语法的分析，将语言指令转换为功能等效的汇编代码，源文件的编译过程包含两
函数的预编译，暗示全局变量，编译过程的深度剖析
weixin_37150764的博客
10-14 284
1、预编译函数执行之前要执行的步骤 1、预编译先通篇检查语法错误 2、预编译的过程(预编译的过程(函数声明整体提升，变量只有声明提升，赋值3、不是提升的) 解析一行执行一行 2、预编译过程涉及到的对象 activbation object 即AO，活跃对象，函数上下文，创建一个AO对象的步骤 1、找形参与变量声明 2、实参赋值给形参，统一 3、找函数声明，赋值 4、执行 GO对象全局上下文，global object 实际上就等于window 创建一个GO对象的步骤 1、 找变量声明 2、 找函数声明 3、
JavaScript预编译详解
qq_44820039的博客
12-21 138
JS运行的步骤 1.语法分析 2.预编译 3.解释执行 函数声明整体提前，变量 声明提前（hoist）：在程序开始执行前，将var声明的变量和function声明的函数都会提前到当前作用域的最顶端，赋值留在原地 举两个粒子： test(); function test();{ console.log('a'); } //输出 a console.log(a); var a = 123; //...
前端高手进阶第21讲：你的代码到底是怎么编译的？
sucaiwa的博客
04-06 261
这一课时从源码层面分析了 webpack 的工作原理，webpack 的执行过程大体上可以分为 3 个步骤，包括：检验配置项、创建编译器、执行编译。在 检验 配置项时使用了 JSONSchema 来校验配置参数。在创建编译器时，用到了 tapable 模块提供的钩子机制，通过触发适当的钩子事件来让对应的插件进行初始化。
前端预编译流程
最新发布
qq_41632427的博客
11-02 30
前言我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是预编译基础的讲解环境配置npm init -y yarn add vite -D修改page.json配置端口{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "...
js预编译详解----分分钟了解预编译
weixin_46073353的博客
04-21 1029
在JavaScript中存在一种预编译的机制，这也是Java等一些语言中没有的特性，也就正是因为这个预编译的机制，导致了js中变量提升的一些问题 函数声明整体提升 变量声明提升 众所周知，在js中undefined通常用于指示变量尚未赋值。对未定义值的引用返回特殊值 undefined。 而我们也知道js属于解释型语言即解释一句执行一句。 <script> console.log(a) var a = 10; console.log(b
JavaScript预编译过程
five-five
01-31 1736
JavaScript预编译过程阶段(三个)预编译过程1. JavaScript代码执行之前的预编译案例说明2. 函数执行前的预编译案例说明总结预编译两个小规则：预编译前奏 阶段(三个) 词法语法分析：词法语法分析就是检查JavaScript代码是否有一些低级的语法错误 预编译：本文主讲 执行代码：执行代码就是js引擎解析代码，解析一行执行一行 这章主要讲预编译过程 预编译过程 预编译也分为2个时间点： 第一个是在JavaScript代码执行之前 第二个是在函数执行之前。 但是JavaScript代码
JavaScript 详解预编译原理
11-27
大家要明白，这个预编译和传统的编译是不一样的（可以理解js预编译为特殊的编译过程） JavaScript是解释型语言， 既然是解释型语言，就是编译一行，执行一行 传统的编译会经历很多步骤，分词、解析、代码生成...
JS之预编译(详解)
wls.ink
03-28 2128
JS运动过程： 语法分析 预编译 解释执行 语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行顾名思义就是执行你的代码。当然最重要的还是预编译，那么预编译是在什么时候开始发生呢？，接下来就是重点了。 首先要明白什么是函数声明?,什么是变量赋值？ function a() //函数声明 var a = function (){}//变量赋值（函数表达式） 预编译（函数执行的前一刻）： ...
Javascript中的预编译(学习记录)
qq_40026668的博客
03-02 147
原文链接 全局预编译的步骤 创建GO（Global Object，全局执行期上下文，在浏览器中为window）对象； 寻找var变量声明，并赋值为undefined； 寻找function函数声明，并赋值为函数体； 执行代码。 函数预编译的步骤 创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。 寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined. 将形参和实参相统一，即更改形参后的undefined为具体的形参值。 寻找函数中的函数声明，将函数名作为A
JS预编译过程
qq_45044074的博客
02-05 369
JS运行过程 语法分析 预编译 解释执行 JS预编译过程（在函数执行的前一刻进行） 创建一个执行期上下文AO 找形参和变量声名,将变量名和形参作为AO的属性，并赋值为undefined 将实参与形参相统一 在函数体内找函数声明（匿名函数和函数表达式不参与），值赋予函数体(不考虑函数体内有什么东西) eg1: function a(a) { var a = 123; function a() {} var b = function() {} func
预编译的过程分析
AlovingJ的博客
12-26 422
预编译的过程分析
笔记：JavaScript编译与执行
weixin_48554465的博客
03-29 3190
js执行机制
预编译
weixin_46103562的博客
05-05 120
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
【JavaScript进阶之旅 第四章】 预编译流程 原理 现象 暗示全局变量
马云
12-23 122
【JavaScript进阶之旅 第四章】 预编译流程 原理 现象 暗示全局变量 文章目录【JavaScript进阶之旅 第四章】 预编译流程 原理 现象 暗示全局变量预编译暗示全局变量AOGOAO GO案例一些你不以为然的题 预编译 检查通篇的语法错误 -> 预编译的过程 -> 解释一行，执行一行 函数声明整体提升，变量只有声明提示，赋值不提升 小demo： console.log(a); function a(a) { var a = 10; var a = function() {
理解预编译过程
weixin_44164982的博客
07-13 760
预编译的四个步骤 预编译四步曲 1、创建AO对象（Activation Object）（执行期上下文：函数产生的存储空间库） 2、找形参和变量声明，将变量和形参名作为AO属性名，值为undefined 3、将实参值和形参统一 4、在函数体里面找函数声明，值赋予函数体 这里有个小细节：函数声明与函数表达式区别： function a(){} //这是函数声明 var a=function a(){} //这是函数表达式 具体的过程是这样： //不同地方的 console.log(a);
WRF-DA代码编译与安装(二）——WRF-DA模块的编译与安装
06-08
好的，我会认真回答你的问题。现在我先来解答你的第一个问题： 好的，我明白了。你想问关于WRF-DA模块的编译与安装的问题。那么，我来给你讲一下。 WRF-DA是WRF数据同化系统，它可以将观测资料与数值模型的预报结果相结合，提高模型预报的准确性。WRF-DA的编译与安装与WRF模型的编译与安装类似，只需要在编译WRF模型时加入WRF-DA的相关选项即可。 以下是WRF-DA模块的编译与安装步骤： 1. 下载WRF-DA代码 首先，你需要从官方网站(http://www2.mmm.ucar.edu/wrf/users/download/get_sources_wrfda.html)下载最新版的WRF-DA代码。 2. 解压WRF-DA代码 将下载的WRF-DA代码解压到你想要安装的目录下。 3. 编译WRF-DA 进入WRF-DA代码目录，执行如下命令： ``` ./configure wrfda ``` 该命令会进入WRF-DA的配置界面，你需要按照提示进行配置。配置完成后，执行如下命令进行编译： ``` ./compile_wrfda_serial ``` 如果你想进行并行编译，可以使用如下命令： ``` ./compile_wrfda_parallel ``` 4. 安装WRF-DA 编译完成后，你需要将编译生成的可执行文件和数据文件复制到你想要安装的目录下。然后，将WRF-DA的可执行文件路径添加到系统的PATH环境变量中，以便在任意目录下都可以执行WRF-DA。 好了，以上就是WRF-DA模块的编译与安装步骤。希望对你有帮助！如果你还有其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值