5分钟教你读懂JavaScript预编译和函数执行

Posted 2021-09-10 萌萌的DDD

JavaScript运行三部曲

javascript在展示页面之前会提前进行编译，因此也称之为预编译，而预编译基本分为三部分

1.         语法分析 ----  （有没有基本的语法错误,例如中文,关键字错误...）
2.         词法分析（预编译）
   • 全局对象（global obkject）GO对象
   • 局部对象（active obkject）AO对象
3.        逐行解释执行

JS预编译什么时候发生

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

实例分析

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

页面产生便创建了GO全局对象（Global Object）（也就是window对象）；

第一个脚本文件加载；

脚本加载完毕后，分析语法是否合法；

开始预编译 查找变量声明，作为GO属性，值赋予undefined； 查找函数声明，作为GO属性，值赋予函数体；

 

    <script type="text/javascript">
            console.log(a);

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

执行前:

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

GO = {
      ...//省略自带属性
}

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

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

• 分析<b>函数声明</b>,函数名为属性名,值为函数体，如果函数名和变量名相同，则将其覆盖

GO = {
    a : function a(){

},
    b : undefined,
    c : undefined,
    fun : function fun(){

    }
}

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

• 逐行执行，分析过变量声明，函数声明，这里就不用管了，只管赋值（变量赋值）

        当执行到“var a = 100;”的时候,a赋了一次值,值改变为100

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

    }
}

所以代码的执行结果是：

局部对象（AO对象）--函数执行时

函数执行时

    创建AO对象 activation object

    找形参和变量声明，将变量和形参名作为AO属性名，值为undefined

    将实参和形参统一

    在函数体里面找到函数声明，值赋予函数体

  function test(){
                console.log(b);   
                if(a){    //undefined转换成false
                    var b = 100;
                }
                c = 123;
                console.log(c);
            }
            var a;
            
            test();
            
            a = 20;
            
            test();
            
            console.log(c);

 

执行过程：

生成GO

GO = {

}

变量声明

GO = {
    a : undefined
}

函数声明

GO = {
    a : undefined,
    test : function
}

逐行执行；
test调用,生成test.AO ={}
参数 没有,跳过
变量声明

test.AO = {
    b : undefined
}

函数声明 没有,跳过
得到结果

test.AO = {
    b : undefined
}

逐行执行
改变GO

GO = {
    a : undefined,
    test : function,
    c : 123
}

 

 a值发生改变

GO = {
    a : 20,
    test : function,
    c : 123
}

test调用 生成test.AO={}
参数 没有 跳过
变量声明

test.AO = {
    b : undefined
}

函数声明 没有
结果

test.AO = {
    b : undefined
}

 逐行执行

test.AO = {
    b : undefined
}

j执行结果

 

注意：

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

预编译(函数执行前)

1. 创建AO对象（Active Object）
2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
3. 实参形参相统一，实参值赋给形参
4. 查找函数声明，函数名作为AO对象的属性，值为函数引用

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

1. 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined
2. 查找函数声明，函数名作为全局对象的属性，值为函数引用

预编译小结

预编译两个小规则

函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）

变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

预编译前奏

imply global 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)

一切声明的全局变量，全是window的属性； var a = 12;等同于Window.a = 12;

函数预编译发生在函数执行前一刻。