• 技术文章 >web前端 >js教程

    javascript预编译做了啥

    醉折花枝作酒筹醉折花枝作酒筹2021-07-22 11:36:29原创98

    javascript预编译做了:1、语法分析,就是引擎检查你的代码有没有什么低级的语法错误;2、预编译,简单理解就是在内存中开辟一些空间,存放一些变量与函数 ;3、解释执行,顾名思义便是执行代码了。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    JavaScript运行三部曲

    语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误; 解释执行顾名思义便是执行代码了; 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 ;

    JS预编译什么时候发生

    预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有错 预编译确确实实在script代码内执行前发生了 但是它大部分会发生在函数执行前

    实例分析

    先来区分理解一下这2个概念: 变量声明 var … 函数声明 function(){}

    <script>
    var a = 1;
    console.log(a);
    function test(a) {
      console.log(a);
      var a = 123;
      console.log(a);
      function a() {}
      console.log(a);
      var b = function() {}
      console.log(b);
      function d() {}
    }
    var c = function (){
    console.log("I at C function");
    }
    console.log(c);
    test(2);
    </script>

    分析过程如下:

    预编译

    //抽象描述
        GO/window = {
            a: undefined,
            c: undefined,
            test: function(a) {
                console.log(a);
                var a = 123;
                console.log(a);
                function a() {}
                console.log(a);
                var b = function() {}
                console.log(b);
                function d() {}
            }
        }

    解释执行代码(直到执行调用函数test(2)语句)

    //抽象描述
        GO/window = {
            a: 1,
            c: function (){
                console.log("I at C function");
            }
            test: function(a) {
                console.log(a);
                var a = 123;
                console.log(a);
                function a() {}
                console.log(a);
                var b = function() {}
                console.log(b);
                function d() {}
            }
        }

    执行函数test()之前,发生预编译

    预编译之前面1、2两小步如下:

    //抽象描述
        AO = {
            a:undefined,
            b:undefined,
        }

    预编译之第3步如下:

    //抽象描述
            AO = {
                a:2,
                b:undefined,
            }

    预编译之第4步如下:

    //抽象描述
        AO = {
            a:function a() {},
            b:undefined
            d:function d() {}
        }

    执行test()函数时如下过程变化:

    //抽象描述
        AO = {
            a:function a() {},
            b:undefined
            d:function d() {}
        }
        --->
        AO = {
            a:123,
            b:undefined
            d:function d() {}
        }
        --->
        AO = {
            a:123,
            b:function() {}
            d:function d() {}
        }

    执行结果:

    4[EN]QKQ{QM{]387R)LICF4.png

    注意:

    预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译 ; 只有在解释执行阶段才会进行变量初始化 ;

    预编译(函数执行前)

    预编译(脚本代码块script执行前)

    预编译小结

    【推荐学习:javascript高级教程

    以上就是javascript预编译做了啥的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 预编译
    上一篇:JavaScript的内部方法有什么 下一篇:怎样在JavaScript添加图片
    VIP会员

    相关文章推荐

    • javascript如何设置全局变量• Javascript数组什么意思• javascript中文url乱码怎么办• javascript如何添加事件和删除事件• JavaScript的内部方法有什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网