Detailed analysis of JavaScript precompilation process (code example)

This article brings you a detailed analysis (code example) of the JavaScript pre-compilation process. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Everyone knows that JavaScript is an interpreted language. Since it is an interpreted language, it means compiling one line and executing one line. So why is there precompilation? What does the script execution js engine do? ? Let’s take a look today.

1-JavaScript running trilogy

1. Syntax analysis

2. Pre-compilation

3. Explanation and Execution

Syntax analysis is very simple, that is, the engine checks your code for any low-level syntax errors; Interpretation and execution, as the name suggests, is to execute the code; Pre-compilation is simply understood. Create some space in the memory to store some variables and functions;

2-When does JS pre-compilation occur?

When does pre-compilation occur? Misconception that pre-compilation only occurs in the code within the script There is nothing wrong with this. Precompilation does happen before the script code is executed, but most of it will happen before the function is executed.

3-Example Analysis

Let’s distinguish and understand first Let’s look at these two concepts: Variable declaration var... Function declaration function(){}

<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>

The analysis process is as follows:

1. The GO global object is created when the page is generated (Global Object) (that is, window object);

2. The first script file is loaded;

3. After the script is loaded, analyze whether the syntax Legal;

4. Start precompiling to find variable declarations, as GO attributes, and assign the value to undefined; Search for function declarations, as GO attributes, and assign the value to the function body;

Precompilation

//抽象描述
    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() {}
        }
    }

Explain the execution code (until the statement calling function test(2) 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() {}
        }
    }

Precompilation occurs before executing function test()

1. Create AO active object (Active Object);

2. Find formal parameters and variable declarations, and assign the value to undefined;

3. The actual parameter value is assigned to the formal parameter;

4. Find the function declaration and assign the value to the function body;

Before precompilation, the two numbers 1 and 2 above The steps are as follows:

//抽象描述
    AO = {
        a:undefined,
        b:undefined,
    }

The third step of pre-compilation is as follows:

//抽象描述
        AO = {
            a:2,
            b:undefined,
        }

The fourth step of pre-compilation is as follows:

//抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }

The following process changes when executing the test() function:

//抽象描述
    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() {}
    }

Execution result:

Note:

Variable declaration and function declaration occur during the pre-compilation phase, no Initialization behavior (assignment), anonymous functions do not participate in pre-compilation; variables will only be initialized during the interpretation and execution phase;

Pre-compilation (before function execution)

1. Creation AO object (Active Object)

2. Look for function parameters and variable declarations within the function. The formal parameter names and variable names are used as attributes of the AO object, and the value is undefined

3. The actual parameters and formal parameters are unified, and the actual parameter values ​​are assigned to the formal parameters

4. Look for the function declaration, the function name is used as an attribute of the AO object, and the value is the function reference

Pre-compilation (before script code block script is executed)

1. Look for global variable declarations (including implicit global variable declarations, omitting var declarations), variable names Attributes of the global object, the value is undefined

2. Find the function declaration, the function name is used as the attribute of the global object, the value is the function reference

Precompiled Summary

• Two small rules for pre-compilation

1. The overall improvement of function declarations-(To be specific, regardless of function calls and declarations Whether the position is before or after, the system will always move the function declaration to the front of the call)

2. Variable declaration promotion-(To be specific, no matter whether the position of variable call and declaration is before or after, The system will always move the declaration before the call. Note that it is only a declaration, so the value is undefined)

Precompiled prelude

1. imply global means any variable. If it is assigned a value without being declared, then this variable will be owned by the global variable. (The global domain is Window)

2. All declared global variables are properties of window; var a = 12; is equivalent to Window.a = 12;

Function precompilation occurs just before function execution.

The above is the detailed content of Detailed analysis of JavaScript precompilation process (code example). For more information, please follow other related articles on the PHP Chinese website!