preface

We talked about precompilation earlier when we talked about JavaScript scopes, so today I’m going to talk about precompilation. To learn a language well, we must know how it works. So learning JavaScript is the same. First of all, we need to know the three stages of JavaScript operation, which are syntax analysis, precompilation and interpretation execution. This article will introduce you to JavaScript precompilation.

1. Precompilation prelude

  • Implied global variable

    Any variable that is assigned an undeclared value is owned by the global object. This is also something we mentioned earlier in JavaScript scope.

    eg: a = 123;

    The above variable a is assigned undeclared; all variables A are owned by the global object.

  • All declared global variables are properties of the window

    eg:var a = 123; ===> window.a = 123

    Variable A is a global variable and therefore a property of the Window object.

2. Precompile

Precompiled tetralogy

Step 1: Create the AO object

Step 2: Find the parameter and variable declarations and use the variable and parameter names as the AO property names with the value undefined

The third step is to unify the argument values and parameters

The fourth step is to find the function declaration in the function body and assign the value to the function body

Finally, we can analyze it through code

    function fn(a){
        var a = 123;
        function a(){}
        var b = function() {}function d() {}return {
            a,
            b
        }
    }
    fn(1);
Copy the code

Let’s examine the above code based on the precompiled tetralogy described above

The first step is to create the AO object

    var AO = {}
Copy the code

The second step is to find the parameter and variable declarations and use the variable and parameter names as the AO property names with the value undefined

    var AO = {
        a: undefined,
        b: undefined
    }
Copy the code

The third step is to unify the argument values and parameters

    var AO = {
        a: 123,
        b: function(){}
    }
Copy the code

The fourth step is to find the function declaration in the function body and assign the value to the function body

    var AO = {
        a: 123,
        b: function(){},
        d: function(){}
    }
Copy the code

Note: Here’s a little bit of information: it’s important to know the difference between a function declaration and a function expression. In the code above

   function fn(a){
        var a = 123;
        function a(){} // the function declares var b =function(){} // Function expression, anonymous functionfunction d(){} // Function declarationreturn {
            a,
            b
        }
    }
Copy the code

If you look at it, it’s pretty easy to understand, function expressions, var b = function(){} that assign a function to a variable and form an expression, that’s what the name implies. So the only thing left is function declarations.

Finally, we go back to analyze the AOd objects generated after the completion of the tetralogy

    var AO = {
        a: 123,
        b: function(){},
        d: function(){}
    }
Copy the code

When we execute fn, if we want to get the values of a, b, and d, we are actually getting the values from the AO object after precompiling.