【JS】Five minutes to understand precompilation

We all understand that js will perform three steps during operation, 1. Overall syntax analysis (to exclude basic errors), 2. Precompile, 3. Interpretation and execution (interpret and execute one line in sequence). So what is the so-called precompiled?

Let's look at two basic examples

console.log(a);
var a =123;
console.log(a);

//undefined
//123

test();
function test(){
  console.log('a');
}

// a

We can find that no errors are reported in these two examples, which is the role of pre-compilation, which will promote the function declaration as a whole (that is, no matter what line the function is written in, it will be promoted to the front of the logic), and the variable declaration will be promoted ( That is, the var a in the above question is promoted to the front)

But just understanding these does not solve all problems, let's look at the following examples

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

It is obviously impossible to solve this problem by using two promotions, which requires us to study precompilation in depth, because its existence is used to solve the problem of execution order. I mentioned two words  Activation Object in the scope and scope chain before. And  Global Object (hereinafter referred to as AO and GO), let's analyze the above problems.

After executing the first step syntax analysis of js, we enter the pre-compilation link. The first step of global pre-compilation is to generate a GO object (actually a window). The second step is to find the variable declaration and use the variable as one of the GO objects. The property name, the value is undefined The third step is to find the function declaration, and use the function name as the property name of the GO object, and the value is the function body. We will find that the value of the a property in the GO object is converted from undefined to the function body of the a function. That is to say, the result of the second console output is

ƒ a(a) {
        a = a + 1;
        console.log(a);
    }

The pre-compilation of the local function occurs at the moment before the function is executed. In the first step, we will create an AO object. In the second step, we will find the formal parameters and variable declarations, which are also used as the attribute names of the AO object, and the value is undefined. The third step , pass the value of the actual parameter to the AO object as the value of the formal parameter attribute, the fourth step is to find the function declaration in the function body, and assign the value to the function body.

AO={ AO={
  a ：undefined； =>    a:1
}                     }

The value of a is 1. After js interpretation is executed, the value of a is 2, which is the result of the first console.

This is global precompilation and local precompilation, and we can solve all problems about execution order after getting familiar with it. It is worth noting that when accessing a variable locally, when the attribute name does not exist in AO, you need to look for it in GO.

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

// ƒ a() {
//     console.log(a);
// }
// ƒ a() {
//     console.log(a);
// }