JavaScript 预编译过程的详细解读

文章目录

JavaScript运行三部曲

JavaScript预编译

01 关于预编译的一些知识点

02 预编译四部曲（局部）

1. 创建AO对象(Activation Object) (执行期上下文)

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

3. 将实参值和形参统一 （全局预编译省略这一步）

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

03 综合例题——全局和局部的预编译和解释执行过程

1. 全局预编译三部曲

2. 局部预编译四部曲

3. JavaScript的解释执行

JavaScript运行三部曲

在学习预编译之前，我们要先了解一下js的运行步骤：

语法分析：通篇检查代码是否有语法错误，若有，则程序不会执行；若无，则进行预编译。

预编译

解释执行：从上到下依次执行函数代码。

JavaScript预编译

01 关于预编译的一些知识点

（1）函数声明整体提升：不管你的函数声明写在哪里，系统总是会将其提升到逻辑最前面，所以不管你是在函数的上面或下面调用函数，其实都是在下面调用的。（2）变量仅声明提升：如 var a = 123;则将其拆成两个部分 即 声明var a位置提升到逻辑最前端，赋值a=123不提升。所以若是在声明赋值变量前进行调用，则会显示undefined，而不会报错。（3）imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。即：

function test(){

a = 10; //在局部里面赋值，没有进行var声明

}

因为没有进行var声明，相当于在全局域里定义，即window.a = 10;

var a = b = 123;//局部里

上面代码的执行顺序：先将123赋给b，其次是b的值赋给a，但是声明只声明了a，没有声明b，所以此时b归window所有。

（4）一切声明的全局变量，全是window的属性，即归window所有，而调用全局变量，其实就是调用window.变量。(window 就是全局的域)即：

var b = 234; //在全局域里面声明定义

即 相当于window.b = 234。

02 预编译四部曲（局部）

下面就通过check这个函数来解释预编译的四个步骤

function check(a) {

console.log(a);

var a = 123; //变量声明和定义

console.log(a);

function a() {} //函数声明

console.log(a);

var b = function () {} //变量声明和定义

console.log(b);

function d() {} //函数声明

}

check(1);

1. 创建AO对象(Activation Object) (执行期上下文)

  AO {}

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

从上面的代码中，我们可以知道形参是a，也定义了变量b。

AO {

a : undefined,

b : undefined,

}

3. 将实参值和形参统一 （全局预编译省略这一步）

函数执行传入的实参是1，所以形参a=1。

AO {

a : 1,

b : undefined,

}

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

a的值变成了函数体（存在同名的情况，直接覆盖以前的值），还添加了一个d属性，值为函数体。

AO {

a : function a() {},

b : undefined,

d : function d() {}

}

以上预编译过程就结束了，接下来就是js三步曲中的第三步——解释执行。（解释执行的时候，AO对象里的属性值也会发生改变，而每次想要输出的变量，其实就是在AO对象中找对应的值）

//开始js的解释执行，修改AO对象

function check(a) {

// 此时的AO对象就是预编译结束之后的样子

    // AO {

    // a : function a() {},

    // b : undefined,

    // d : function d() {}

    // }

    console.log(a); //输出function a() {}

    var a = 123; //预编译已经将var a提升执行过了，所以直接执行赋值a=123

    // AO {

    // a : 123,

    // b : undefined,

    // d : function d() {}

    // }

    console.log(a); //输出123

    function a() {} //预编译已经提升声明了，被优先执行了，所以不看了

    console.log(a); //输出123

    var b = function () {} //预编译已经将变量b的声明提升执行了，所以只用看赋值

    // AO {

    // a : 123,

    // b : function() {},

    // d : function d() {}

    // }

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

    function d() {} //预编译已经提升声明了，被优先执行了，所以不看了

}

check(1); //函数执行，实参为1

03 综合例题——全局和局部的预编译和解释执行过程

现在就通过下面的代码来练习一下全局和局部一起的预编译和它们的执行过程：

console.log(test);

function test(test) {

            console.log(test);

            var test = 234;

            console.log(test);

function test() { }

}

test(1);

var test = 123;

1. 全局预编译三部曲

（1）创建GO对象：全局预编译的情况下，会生成Global Object对象，其实和AO同理，只是换了个名字。（GO === window）

GO {}

（2）找变量声明作为GO属性名，值为undefined

GO {

test : undefined

}

（3）找函数声明，值赋予函数体

GO {

test : function test(test) {…}

}

2. 局部预编译四部曲

(此时的AO对象为函数test里的)

（1）创建AO对象

AO {}

（2）找形参和变量声明赋值undefined

AO {

test : undefined

}

（3）实参形参统一

AO {

test: 1

}

（4）找函数声明，值赋予函数体

AO {

test: function test() {}

}

123

3. JavaScript的解释执行

// js开始解释执行

//全局

// GO {

// test : function test(test) {…}

// }

console.log(test); // function test(test) {…}

function test(test) {

// 局部

// AO {

//test: function test() {}

// }

console.log(test); // function test(){}

var test = 234;

// AO {

//test: 234

// }

console.log(test); // 234

function test() {}//预编译已经提升了声明，被优先执行了，所以不看了

}

test(1);

var test = 123;

// GO {

// test : 123

// }

console.log(test);  //123

// js执行结束

注意：如果GO中和AO中都有test函数，若在局部中就先找AO的，但如果AO没有的话再找GO；若在全局中就找GO的用。（就近找，自己没有找爸爸，爸爸没有找爷爷等）

个人笔记，欢迎大家交流探讨！

百度网盘链接:https://pan.baidu.com/s/1vF1A7beP0oovDaUFvjY9MA 提取码: r5d3

原著是一个有趣的人,若有侵权,请通知删除