js has three steps: 1. Syntax analysis; 2. Precompiling; 3. Interpretation and execution
There are two types of precompiling: first, global precompiling; 2, Partial precompiling.
It is precisely because of precompiling that there are variable promotion (excluding assignment) and overall function declaration promotion in js.

Global precompile (GO)

Global precompiling is performed when the page is loaded. It mainly includes the following three steps:
1. Create a GO object Global Object.
2. Find the variable declaration, take the variable name as the GO attribute name, and the value is undefined.
3. Find the function declaration as the GO attribute, and assign the value to the function body.

GO Example:

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

Solution:

1. Create a GO object Global Object.

//Create a GO object Global Object.
GO{}

2. Find the variable declaration, take the variable name as the GO attribute name, and the value is undefined.

//Find the variable declaration, take the variable name as the GO attribute name, and the value is undefined
GO{
	a:undefined, //Only var a is declared
}

3. Find the function declaration as the GO attribute, and assign the value to the function body.

//Find the function declaration as the GO attribute, and assign the value to the function body
GO{
	a:function a() { },//The function declaration replaces the variable a
}

//Solution:
console.log(a);//function a() {}: precompiled
a = 100;
function a() { };
console.log(a);//100: because a = 100 is assigned
var a;

Partial precompiling (AO)

Local precompiling is performed immediately before the function is executed. It mainly includes the following four steps:
1. Create an AO object, also known as an execution context.
2. Find the formal parameter and argument declaration, take the formal parameter and argument name as the attribute of AO object, and the value is undefined.
3. Unify argument values and formal parameters
4. Find the function declaration in the function body and assign it to the function body

AO Example:

//Example:
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);

Solution:

1. Create AO object

//Create AO object
AO{}

2. Find the formal parameter and argument declaration, take the formal parameter and argument name as the attribute of AO object, and the value is undefined.

//Find the formal parameter and argument declaration, take the formal parameter and argument name as the attribute of AO object, and the value is undefined.
/*
Formal parameter: a
 Argument: a, b
*/
AO{
	a:undefined,
	b:undefined
}

3. Unify argument values and formal parameters

//Unify argument values and formal parameters
AO{
	a:1,
	b:undefined
}

4. Find the function declaration in the function body and assign it to the function body

//Find the function declaration in the function body and assign it to the function body
/*
Function declaration: function a() {}, function d() {}
*/
AO{
	a:function a(){},
	b:undefined,
	d:function d(){}
}

Partial precompiling completed!!

//Function is executed after precompiling
function fn(a){
    console.log(a);//function a(){}
    var a = 123;
    console.log(a);//123: a reassigned
    function a(){}
    console.log(a);//123: function a() {} has been advanced during precompiling, and there is no re assignment here
    var b = function(){}
    console.log(b);//function() {}: in precompiling, the value of b is undefined, but it is assigned in the previous line
    function d(){}
}

fn(1);

GO+AO example

console.log(test);
console.log(a)
a = 100;//It is equivalent to defining window a;
function test(a) {
    console.log(a);
    function a() { }
    console.log(a);
    var a = 300;
}
test(a);

Problem solution:

First look at GO

1. Create GO object

GO{}

2. Find the variable declaration, take the variable name as the GO attribute name, and the value is undefined. (no variables are declared in this question)

GO{}

3. Find the function declaration as the GO attribute, and assign the value to the function body.

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

GO precompiled!!!

//Global interpretation of results after execution
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
a = 100;//It is equivalent to defining a window a;
function test(a) {
    console.log(a);
    function a() { }
    console.log(a);
    var a = 300;
}
test(a);

Then look at AO

1. Create AO object

AO{}

2. Find the formal parameter and argument declaration, take the formal parameter and argument name as the attribute of AO object, and the value is undefined.

AO{
	a:undefined
}

3. Unify argument values and formal parameters

AO{
	a:100
}

4. Find the function declaration in the function body and assign it to the function body

AO{
	a:function a() { }
}

Partial compilation completed!!!

//Partially explain the results after execution
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
a = 100;//It is equivalent to defining a 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 precompiling. Pay attention to the column of "front end Basics" to learn more.
I will share with you the common problems in my usual projects and the knowledge of written examination and interview in CSDN, and make progress together. Come on.