【前端基础知识】JavaScript 预编译，刚接触前端的赶紧学起来，否则“命途多舛”

js运行有三个步骤：1、语法分析；2、预编译；3、解释执行
预编译有两种：一、全局预编译；二、局部预编译。
也正是因为有预编译，导致了js中存在变量提升（不包括赋值）和函数声明整体提升。

全局预编译（GO）

全局预编译是在页面加载完成时执行，主要包括以下三个步骤：
1、创建GO对象（Global Object）全局对象。
2、找变量声明，将变量名作为GO属性名，值为undefined。
3、查找函数声明，作为GO属性，值赋予函数体。

GO例题：

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

题解：

1、创建GO对象（Global Object）全局对象。

//创建GO对象（Global Object）全局对象。
GO{}

2、找变量声明，将变量名作为GO属性名，值为undefined。

//找变量声明，将变量名作为GO属性名，值为undefined
GO{
	a:undefined, //只有var a 这个变量声明
}

3、查找函数声明，作为GO属性，值赋予函数体。

//查找函数声明，作为GO属性，值赋予函数体
GO{
	a:function a() { },//函数声明将变量a替换掉了
}

//题解：
console.log(a);//function a() { }：预编译
a = 100;
function a() { };
console.log(a);//100：因为a = 100进行赋值
var a;

局部预编译（AO）

局部预编译是在函数执行前一刻执行的，主要包括以下四个步骤：
1、创建AO对象（Activation Object），也叫执行期上下文。
2、找形参和实参声明，将形参和实参名作为AO对象的属性，值为undefined。
3、将实参值和形参统一
4、在函数体里面找到函数声明，赋值予函数体

AO例题：

//例题：
function fn(a){
    console.log(a);
    var a = 123;
    console.log(a);
    function a(){}
    console.log(a);
    var b = function(){}
    console.log(b);
    function d(){}
}

fn(1);

题解：

1、创建AO对象

//创建AO对象
AO{}

2、找形参和实参声明，将形参和实参名作为AO对象的属性，值为undefined。

//找形参和实参声明，将形参和实参名作为AO对象的属性，值为undefined。
/*
形参：a
实参：a、b
*/
AO{
	a:undefined,
	b:undefined
}

3、将实参值和形参统一

//将实参值和形参统一
AO{
	a:1,
	b:undefined
}

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

//在函数体里面找到函数声明，赋值予函数体
/*
函数声明：function a(){}、function d(){}
*/
AO{
	a:function a(){},
	b:undefined,
	d:function d(){}
}

局部预编译完成！！

//题解：函数是在预编译完成后执行的
function fn(a){
    console.log(a);//function a(){}
    var a = 123;
    console.log(a);//123：a重新进行了赋值
    function a(){}
    console.log(a);//123：function a(){}在预编译的时候已经提前，这里没有重新赋值
    var b = function(){}
    console.log(b);//function(){}：在预编译中b的值为undefined，但是在上一行进行了赋值
    function d(){}
}

fn(1);

GO+AO例题

console.log(test);
console.log(a)
a = 100;//相当于定义了window.a;
function test(a) {
    console.log(a);
    function a() { }
    console.log(a);
    var a = 300;
}
test(a);

题解:

首先看GO

1、创建GO对象

GO{}

2、找变量声明，将变量名作为GO属性名，值为undefined。（本题没有声明变量）

GO{}

3、查找函数声明，作为GO属性，值赋予函数体。

GO{
	test:function test(a) {
	    console.log(a);
	    function a() { }
	    console.log(a);
	    var a = 300;
	}
}

GO预编译完成！！！

//全局解释执行后的结果
console.log(test);//function test(a) { console.log(a); var a = 200; console.log(a); var a = 300;}
console.log(a);//Uncaught ReferenceError: a is not defined（要执行test函数，后面讲AO的时候要删掉此行）
a = 100;//相当于定义了一个window.a;
function test(a) {
    console.log(a);
    function a() { }
    console.log(a);
    var a = 300;
}
test(a);

然后看AO

1、创建AO对象

AO{}

2、找形参和实参声明，将形参和实参名作为AO对象的属性，值为undefined。

AO{
	a:undefined
}

3、将实参值和形参统一

AO{
	a:100
}

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

AO{
	a:function a() { }
}

局部编译完成！！！

//局部解释执行后的结果
console.log(test);//function test(a) { console.log(a); var a = 200; console.log(a); var a = 300;}
//console.log(a);//Uncaught ReferenceError: a is not defined（要执行test函数，后面讲AO的时候要删掉此行）
a = 100;//相当于定义了一个window.a;
function test(a) {
    console.log(a);//function a() { }
    function a() { }
    console.log(a);//function a() { }
    var a = 300;
}
test(a);

以上就是JavaScript 预编译的内容，关注《前端基础知识》专栏学习更多。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。