Deep understanding of the “precompile stage” and “execute stage” in JS

What is “precompilation”

1. Javascript is an interpreted language, such as C, Java and other strongly typed languages, which do not have this step in the compile stage, so javascript has a similar step in the compile stage of strongly typed languages, and we need to know that the JS engine does not interpret the code line by line. It is interpreted as a block of code, that is, as a <script></script> tag. It is also important to remember that the precompilation process occurs and is executed just before execution. 2, we have their own sets of in the process of programming and grammar, in the same way, the computer also has its own set of, in the face of the code, we can clearly know the operation mode and sequence, but the computer can not understand, therefore, precompiled also is to let the computer we "know" the process of writing code, such as below will be mentioned, AO object, Is an important dependency of the JS engine in the process of executing code;Copy the code

Declarations in javascript

There are two ways to declare things in JS, variable declarations and function declarations namely, var(let, and const)functionUnderstanding this is important for the following precompilation processCopy the code

The following is an analysis of the precompilation process along with the code

  <script>

    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() {}; } test(1);

  </script>So what happens when you try to write this code yourself?Copy the code

Function precompilation occurs just before the function is executed

The first step is to create the AO object

In the above code, the script tag is simple to see, there is a function definition and the function of the parameters to perform two steps, the JS engine scans the code, in the "test().1This object stores the declarations of variables and methods, which are only available for the JS engine to read and other operations. Each function will have its own AO object, and this object belongs to the test function. So this AO object is the scope of the test function AO {}Copy the code

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

The parameter a is added as a key to the AO object with a value ofundefined; There are two variable declarations,varA;varB; Note that since the declared variable a is the same as the parameter, it only needs to be added once, and the AO object will look like this: AO {a:undefined.b:undefined
}
Copy the code

Note: 1, the same variable name as the attribute name 2, variable declaration, not function declaration

The third step is to unify the argument values and parameters

AO {a:1, b:undefined} test(1) ===>Copy the code

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

There are two function declarationsfunction a() {}

function d() {} where the function name declared by function A is the same as the variable name in the variable declaration. In this step, the function declaration takes precedence over the variable declaration, which overwrites the previous variable declaration. At the same time, the function declaration of d is added, and the AO object becomes: AO {a: function a() {},
  b: undefined.d: function d() {}}Copy the code

Function XXX () {} var XXX = function () {}

At this point, the precompilation process is complete, and the following is the function execution

Log (a);

We know from the AO object that the value of a isfunction a() {} The result of this code execution is fucntiona() {}
Copy the code

2. The code continues to execute

var a = 123; After executing this line of code, the AO object becomes AO {a: 123.b: undefined.d: function d() {}} therefore, the result of execution is123
Copy the code

3. The code that continues to execute is the function declaration

This has been improved during the precompilation process, the AO object remains unchanged, and the result of this line of code execution is 123Copy the code

4. Continue

AO {a: 123, b: AO {a: 123, b: AO {a: 123, b: AO {a: 123, b:function () {},
  d: function d() {}} therefore, the result of this line of code execution isfunction () {}
Copy the code

5. The code is then executed. This part of the code was processed during the precompilation process

The result of the above code execution is

function a() {}
123
123
function () {}
Copy the code
exercisesfunction fn(a, b) {
    console.log(a);

    console.log(b);
    
    var b = 234;

    console.log(b);

    a = 123;

    console.log(a);

    function a() {};var a;

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

    console.log(b);
  }

  fn(1);
Copy the code