If you’re learning JavaScript, you know it’s an interpreted language, but if it’s an interpreted language (compile one line, execute one line), what’s the point of precompiling? Before we get down to business, what is an interpreted language and what is a compiled language?

Compiled languages:

Using a specialized compiler, the high-level language source code for a particular platform is compiled into machine code that can be executed by the platform’s hardware, and packaged into an executable program format that the platform can recognize.

Features: before a compiled language program execution, because the computer does not recognize a high-level language, needs a special compilation process, the high level language program compiled into machine language that the computer can read files, such as the. Exe file, after the compiled at runtime, you want to be when you don’t need to go to compile, as long as the execution. Exe file. This is all done before execution.

Interpretive language:

Use a specialized interpreter to interpret the source program line by line into platform-specific machine code and execute it immediately. The code is dynamically translated and executed by the interpreter line by line at execution time, rather than being translated before execution.

Features: When executing an interpreted language program, no prior compilation is required, but the code is interpreted into machine code and executed immediately, that is, as it is interpreted and executed.

JavaScript run trilogy:

  1. Parsing is when the engine checks the code for low-level syntax errors
  2. Precompilation is simply creating some memory space for variables and functions (for js, variable promotion and function promotion).
  3. Explain execution is exactly what the name implies

Precompilation occurs before the function is executed, in tetralogy

  1. Create an AO Object (ActivationN Object)
  2. Find the parameter and variable declarations as the attribute names of AO objects with the value undefined
  3. Unify arguments and parameters
  4. Find the function declaration in the function body and assign the function name to the AO property name

Precompilation also occurs globally, in the trilogy

  1. Create the GO object
  2. Find the variable declaration as the property name of the GO object, and assign the value to undefined
  3. Find the function declaration in the global bureau and assign the function name as the attribute name of GO with the value assigned to the function body

Let’s use the trilogy and tetralogy to explain and analyze the following program:

<script>
    var a=1
    function fn(a){
    var a=2
    function a(){}
    var b=a
    console.log(a);
        }
        fn(3)
</script>
Copy the code

First, there are function bodies and global variables in this program. So we use trilogy and tetralogy

Analyze the program:

  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

Let’s abstract this: Create a GO object immediately

GO={a undefined fn function(a){var a=2; function a(){}; var b=a; console.log(a); }}Copy the code

The second step in the tetranyl process is to find the parameter and variable declarations as the attribute names of the AO object, with the value undefined, before the fn(3) function is precompiled

AO={
    a undefined
    b undefined
    
Copy the code

Then perform the third step of the tetralogy: unify the argument with the parameter (assign the value of the argument to the parameter)

AO={a undefined=>3 b undefined}Copy the code

Step 4: Find the function declaration in the function body and assign the function name as the AO attribute name

AO={
    a undefined=>3=>function(){}
    b undefined
    }
Copy the code

Var a=1; var a=1; I’m not assigning 1 to a at this point.

GO={a undefined=>1 fn funcyion(){}} AO={ A undefined=>3=>function(){}=>2 b undefined=>2 console.log(aCopy the code

Let’s look at the precompilation of a function body

function fn(a) {
      console.log(a);  //function
      var a = 123;
      console.log(a);   //123
      function a() {}
      console.log(a);   //123
      var b = function() {}
      console.log(b);   //function
      function d() {}
      var d = a
      console.log(d);   //123
    }
    fn(1)
Copy the code

The first step of the tetralogy is to create the AO object, and then the second step is to find the parameter and variable declarations (and declare undefined). Step 3: Assign the value of the parameter to the argument. Var a=function(); var a=function(); var a=function()

{a = undefined, b = undefined, d = undefined} A undefined=>1 b undefined d undefined} Function (){} b undefined=>function(){} c undefined=>function(){} d undefined=>function(){}}Copy the code

Our precompilation is done. Start execution:

First find the fn (1); Enter the body of the function fn(), which executes from the top down, printing a in the first step. We see what precompilation looks like at the end, and if A ends up being a function body, so a prints function. Then assign a the value 123(see figure below). So the next console.log(a) prints 123, and then function a() {} we don’t need to look at this, so we go down to console.log(a) which is the AO of the pre-compiled assignment, a is still 123, so it prints 123. Var b = function() {}; var b = function() {}; So function. Function d() {} So let’s go ahead and say var d = a and we’re assigning a to B, and we’re looking to see if a is 123, so we’re assigning 123 to B. So the console. The log (d); Output 123**.**

Function (){} d undefined=>function(){} d undefined=>function(){}=>123Copy the code

Note: there is a mistake please point out thank you! Each other to grow