There are three steps in js operation: 1. Syntax analysis; 2. Pre-compilation; 3. Interpretation and execution
There are two types of pre-compilation: 1. Global pre-compilation;
It is also because of precompilation that there are variable promotions (excluding assignments) and overall promotion of function declarations in js .
Global precompilation (GO)
Global precompilation is executed when the page is loaded , and it mainly includes the following three steps:
1. Create a GO object (Global Object) global object.
2. Find the variable declaration, use the variable name as the GO attribute name, and the value is undefined.
3. Find the function declaration, as a GO attribute, and assign the value to the function body.
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;
Partial precompilation (AO)
Partial precompilation is performed just before the function is executed , and it mainly includes the following four steps:
1. Create an AO object (Activation Object), also called the execution context.
2. Find the formal parameter and actual parameter declaration, use the formal parameter and actual parameter name as the properties of the AO object, and the value is undefined.
3. Unify the actual parameter value and formal parameter
4. Find the function declaration in the function body and assign it to the function body
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 example
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);
题解:
First look at 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);
Then watch 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);
The above is the content of JavaScript pre-compilation, pay attention to the " Front-end Basics " column to learn more.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.