JS 运行三部曲

JS 运行三部曲
预编译前奏
预编译四部曲
小练习
总结

语法分析

语法分析很简单，就是引擎检查你的代码有没有什么低级的语法错误

预编译

预编译发生在代码执行的前一刻,预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数；

解析执行

解释执行顾名思义便是执行代码了

预编译前奏

暗示全局变量 imply global

任何变量,如果变量未经申明就赋值,此变量就为 全局对象 所有。

    a = 1;
    console.log(window.a);

    function test() {
        var a = b = 2;
    }
    test();
    console.log(window.b);

全局变量

一切申明的 全局变量, 全是 window 的属性, window 就是全局的域

GO 和 AO

JS 在执行前会产生一个 GO ,也就是我们说的全局作用域。当一个方法被调用时会形成一个局部作用域 AO

全局代码在执行的时候，先是 变量提升 , 在全局作用域内添加属性，然后是函数（以函数声明创建的函数）提升,再是代码执行

我们先来个简单的小栗子来看看

    var b = 2;
    console.log(b);

    console.log(b);
    var b = 2;

此时我们打印出来 b 的值为 undefined,那我们不定义 b 直接打印 b 是什么情况呢

console.log(b);

结果如上图浏览器报错.

为什么在 console.log 前，后和不定义 b 会有如此大的差别，这就是预编译起到的作用

我们再看看下面这个列子

    console.log(a);
    var a = 123;
    function a() {
    }
    console.log(a);

微信图片_20200111143158.png

结果怎么来的呢???

那我们就得看下面的预编译四部曲

预编译四部曲

创建 GO/AO 对象
找形参和变量申明,将变量和形参名作为 AO 属性名,值为 undefined
将实参值和形参值统一
在函数体里面找函数申明,值赋予 函数体

这四部是什么意思呢,我们举个例子看看:

    function fn(a) {
        console.log(a);
        var a = 123;
        console.log(a);
        function a() { }

        console.log(a);
        console.log(b);
        var b = function () { }
        console.log(b);
    }
    fn(1);

大家觉得应该输出什么呢?

我们来分析下:

首先方法调用形成一个局部 *AO


AO{

}

找方法里面的形参和变量申明, fn 里面只有 a 和 b,作为 AO 的属性并把值设置为 undefined


AO{
    a:undefined,
    b:undefined
}

然后将形参和实参的值统一,什么意思呢,就是给形参 a 赋值为实参 1,此时的 AO:


AO{
    a:1,
    b:undefined
}

最后一步函数体找函数申明,并赋值为函数体, 我们找到了函数申明 function a() { } ,有人会问 b呢,不好意思 b 是函数表达式,因此忽略,此时 AO 为:


AO{
    a:function a() { },
    b:undefined
}

到此函数预编译完成,下面开始执行:

第一次 console.log(a) 打印即为 AO 里面的 a => function a() { }
第二次 console.log(a) 执行 a 的赋值,此时 a =>123
第三次 console.log(a) 函数function a() { } 已经预编译申明过, 因此直接忽略, a 还是为 123
第一次 console.log(b) 打印即为 AO 里面的 b => undefined
第二次 console.log(b) 执行 b 的赋值,此时 b =>function () { }

我们来看看打印的是否如我们分析的这样:

fn.png

看来没有问题。

好了,我们已经知道了预编译的过程,那让我们再来一题看看:


function test() {
    console.log(b);
    if (a) {
        var b = 100;
    }
    
    c = 234;
    console.log(b);

    console.log(c);
}

var a;
test();
a = 10;
console.log(a);
console.log(c);

一样的,我们首先生成 GO,AO

GO{
    a:undefined
}

AO{
    b:undefined
}

第一次打印 b 的值为 undefined 没问题,
此时 AO 中没有a 属性,往上找全局属性 GO ,ok a 为 undefined,条件不成立 b 还是 undefined
打印 c 没什么好说的,直接就是 234
函数 test() 执行完毕下面 a 进行复制, 因此打印 a 为 10
打印 c 相当于访问 window.c 因此还是 234

小练习


    a = 100;
    function deme(e) {
        function a() { }
        arguments[0] = 2;
        console.log(e);
        if (a) {
            var b = 123;
            var c = function () { }
        }
        var c;
        a = 10;
        var a;
        console.log(b);
        f = 123;
        console.log(c);
        console.log(a);
    }

    var a;
    deme(1);
    console.log(a);
    console.log(f);

总结

未经申明就赋值,此变量就是全局变量所有,一切申明的全局变量,全是 window 属性
预编译发生在 变量申明 和 函数申明, 匿名函数 和 函数表达式 不参与预编译
变量声明提升—无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明，所以值是 undefined
函数声明整体提升-无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面.如果函数名同形参或变量名同名,则会赋值为 函数体
只有在解析执行才会对变量初始化

觉得不错请帮忙点个赞,谢谢!!!

JS 预编译