First, JavaScript precompilation is not the same as traditional compilation (think of JavaScript precompilation as a special compilation process).

  • We already know that JavaScript is an interpreted language. (Interpreted languages, which compile a line and execute a line)
  • Traditional compilation goes through many steps: word segmentation, parsing, code generation, etc.
  • Here is my understanding of JS precompilation

JavaScript runs a trilogy of scripts that execute JS, and what does the engine do?

  1. Syntax analysis

Scan them all first for grammatical errors.

  1. Precompilation (moments before execution)

Variable declaration promotion function declaration overall promotion

  1. Explain to perform

Explain a line and execute a line

Function: precompile to execute tetralogy

  1. Creating an AO Object (Activation Object execution Context)
  2. Find the parameter and variable declarations and use the variable and parameter names as AO property names with the value undefined
  3. Unify argument values and parameters
  4. Find the function declaration inside the function body and assign the value to the function body

Global: Precompile the trilogy

  1. Create a GO Object (Global Object Window)
  2. Find the variable declaration and take it as the property name of the GO object, and assign the value to undipay
  3. Find the function declaration in the global, and assign the function name as the property name of the GO object, and the value to the function body

The example analysis

<script>
    var a = 1;
    console.log(a);
    function test(a) {
        console.log(a);
        var a = 123;
        console.log(a);
        function a() {}
        console.log(a);
        var b = function() {}
        console.log(b);
        function d() {}}var c = function (){
        console.log("I at C function");
    }
    console.log(c);
    test(2);
</script>
Copy the code

The analysis process is as follows:

  1. Page creation creates the GO Global Object (i.e. Window Object);
  2. The first script file loads;
  3. After the script is loaded, analyze whether the syntax is legal.
  4. Start precompiling
  • Find the variable declaration, as the GO property, with the value assigned to undefined;
  • Find the function declaration, as the GO attribute, with the value assigned to the function body;

The value stored in GO after global precompilation is complete

    // Abstract description
GO/window = {
        a: undefined.c: undefined.test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}}}Copy the code

Interpret the execution code (until the test(2) statement is executed)

GO/window = {
        a: 1.c: function (){
            console.log("I at C function");
        }
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}}}Copy the code

Precompilation occurs again before the function test() is executed

According to the function: precompile to execute the tetralogy

Precompile the first and second steps as follows:

// Abstract description
    AO = {
        a:undefined.b:undefined,}Copy the code

Step 3 of precompilation is as follows:

 // Abstract description
    AO = {
        a:123.b:undefined,}Copy the code

Step 4 of precompilation is as follows:

// Abstract description
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}}Copy the code

The following process changes when the test() function is executed:

 // Abstract description
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123.b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123.b:function() {}
        d:function d() {}}Copy the code

Execution Result:

Note: variable declaration and function declaration occur in the precompilation stage, no assignment behavior, anonymous functions do not participate in the precompilation; Variables are initialized only during the explain execution phase.

Precompile section

  1. Precompile two small rules

    1. Overall improvement in function declarations – (the system always moves function declarations to the front of the call, regardless of whether the function is called or declared)
    2. Variable declaration promotion – (The system always moves the declaration to the front of the call, regardless of the position of the declaration. Note that it is only the declaration, so the value is undefined)

  2. Precompilation prelude

    1. That is, any variable that is assigned an undeclared value belongs to the global variable. (Global is Window)
    2. All declared global variables are window attributes, such as var a=12; = Window. A = 12;
    3. Function precompilation occurs just before the function is executed.

Refer to the link

Refer to the link