JS running code is usually divided into three steps

1. Grammatical analysis

2. The precompiled

3. Explain execution

So what does precompilation mean?

The preparation that code needs to do before it is executed is called execution context or precompilation

Let’s start with a piece of code

    var a = 1
        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(){}
            var d=a
            console.log(d);
        }
        fn(1)
     
Copy the code

Ask this code five console.log(); What would be the result of that execution? Let’s take a look

ƒ a() {} 123Copy the code

At this point, one might ask, how can a few lines of code produce such a different result?

At this point, precompilation is coming on stage!!

!!!!!!!!! Precompilation – four steps that occur before a function (inside a function) is executed

1. Create an AO activation object

2. Look for the parameters and variable declarations as the property names of the AO object, and the values are underpay

3. Unify arguments and parameters

4. Find the function declaration in the function body and assign the function name as the attribute name of the AO object

Take the above example to illustrate the tetralogy:

First, create an AO object

    AO{

    }
Copy the code

Second, look for the parameters and variable declarations, which are the property names of the AO object, with the value underpay

    AO{
            a:underfined,
            b:underfined,
            d:underfined
       }

                    
Copy the code

Third, unify arguments and parameters

    AO{
        a:underfined 1,
        b:underfined,
        d:underfined
               }
Copy the code

Fourth, find the function declaration in the function body, and assign the function name as the property name of the AO object, and the value to the function body

    AO{
        a:underfined 1 function a() {},
        b:underfined,
        d:underfined function d(){}
               }
Copy the code

Finally, follow these four precompiled steps to get the results of the previous section.

It is important to note at this point that precompilation occurs not only inside the function body, but also below the global scope.

The same code is provided

  global = 100
        function fn() {
            console.log(global);
            global = 200
            console.log(global);
            var global = 300
        }
        fn()
Copy the code

Let’s see what the value here is going to be.

    undefined
    200
Copy the code

!!!!!!!!! Precompilation – occurs in the trilogy below global scope

1. Create a GO object

2. Find the variable declaration and take it as the attribute name of the GO object, and assign the value to the underpay

3. Find the function declaration in the global and assign the function name as the attribute name of the GO object with the value assigned to the function body

The same is true here, using the example above (the second code) to illustrate the trilogy:

First, create a GO object

    GO{

    }
Copy the code

Secondly, I look for the variable declaration, which is taken as the attribute name of the GO object, and its value is given to the underpay

AO{global: underpay} Because the function body is inside the function, so the function body will also be precompiledCopy the code

Third, find the function declaration in the global, and assign the function name as the attribute name of the GO object, with the value assigned to the function body

GO{fn:function(){}}Copy the code

Execute as follows:

AO{global: underpay} GO{fn:function(){} global: 25Copy the code

conclusion

This is the end of precompilation, if you run into precompilation problems in the future, you can use the precompiled trilogy and tetralogy to solve the problem. If there are other opinions can leave a message in the comment area oh, in front of the small white one, but also hope everyone to give advice!