JavaScript预编译

Posted 来啦 老弟。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript预编译相关的知识,希望对你有一定的参考价值。

javascript运行三部曲
脚本执行js引擎都做了什么呢?

语法分析
预编译
解释执行
在执行代码前,还有两个步骤
语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误
解释执行顾名思义便是执行代码了
预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数
理解了预编译对大家理解作用域同样有帮助

JS预编译什么时候发生
我当初思维误区也发生在这里
预编译到底什么时候发生
希望大家不要让上面的运行过程让你产生误会,
误以为预编译仅仅发生在script内代码块执行前
这倒并没有错
预编译确确实实在script代码内执行前发生了
但是它大部分会发生在函数执行前

JS预编译实例
举例前,先来思考一下这几个概念:

<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log(so easy);
    };
    var c = function(){//是变量声明而不是函数声明!!
        //...
    }
    b(100);
</script>
<script>
    var d = 0;
</script>

让我们看看引擎对这段代码做了什么吧

页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
第一个脚本文件加载
脚本加载完毕后,分析语法是否合法
开始预编译
查找变量声明,作为GO属性,值赋予undefined
查找函数声明,作为GO属性,值赋予函数体

GO/window = {
    //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
    a: undefined,
    c: undefined,
    b: function(y){
        var x = 1;
        console.log(‘so easy‘);
    }
}
  • 解释执行代码(直到执行函数b)
  • GO/window = {
        //变量随着执行流得到初始化
        a: 1,
        c: function(){
            //...
        },
        b: function(y){
            var x = 1;
            console.log(‘so easy‘);
        }
    }执行函数b之前,发生预编译 
      • 执行函数b之前,发生预编译 
          • 创建AO活动对象(Active Object)
          • 查找形参和变量声明,值赋予undefined
          • 实参值赋给形参
          • 查找函数声明,值赋予函数体
        AO = {
            //创建AO同时,创建了arguments等等属性,此处省略
            y: 100,
            x: undefined
        }

        解释执行函数中代码
        第一个脚本文件执行完毕,加载第二个脚本文件
        第二个脚本文件加载完毕后,进行语法分析
        语法分析完毕,开始预编译
        重复最开始的预编译步骤……
        大家要注意,
        预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译
        只有在解释执行阶段才会进行变量初始化
        嗯~最后收一下尾

        总结
        预编译(函数执行前)※
        1. 创建AO对象(Active Object)
        2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
        3. 实参形参相统一,实参值赋给形参
        4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

        预编译(脚本代码块script执行前)
        1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
        3. 查找函数声明,函数名作为全局对象的属性,值为函数引用






































以上是关于JavaScript预编译的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript预编译

JavaScript的预编译和执行

JavaScript之预编译

浅谈JavaScript预编译原理

JavaScript之预编译学习(内含多个面试题) #yyds干货盘点#

JavaScript预编译学习