JavaScript Detailed Explanation of Precompilation Principle

Principle of JavaScript Precompilation

I spent a lot of time reviewing scoping, precompiling and so on today

I read a lot of blog posts and opened the books I read before (it seems that many books can't talk about precompilation)

I found that I felt that I had learned very clearly, but there were still some misunderstandings (many blog posts are misleading)

I sorted out a messy train of thought tonight

First, sort out the knowledge of precompilation, and then explain the scope in detail when you have time in the future

You should understand that this precompilation is different from traditional compilation. (You can understand that js precompilation is a special compilation process.)

JavaScript is an interpretive language,

Since it is an interpretive language, it is to compile 1 line and execute 1 line

Traditional compilation goes through many steps, such as word segmentation, parsing, code generation and so on

I will give you popular science when I have time in the future

Let's share with you what I understand as JS precompilation

JavaScript runs 3 parts

What does the script execution js engine do?

Grammatical analysis Precompile Interpretation and execution

There are two more steps before executing the code

Parsing is simple, where the engine checks your code for low-level syntax errors

Explain that execution, as the name implies, is to execute code

The simple understanding of precompilation is to open up 1 space in memory and store 1 variable and function

Understanding precompilation is also helpful for everyone to understand scope

When does JS precompilation occur

My misunderstanding also happened here

When exactly does precompilation happen

I hope you don't let the above running process make you misunderstand.

Mistakenly assume that precompilation only occurs before the execution of code blocks within script

There is nothing wrong with this

Precompilation does occur before execution within the script code

But most of it happens before the function executes

JS precompiled instance

Before giving an example, let's think about these concepts:

Variable declaration var … Function declaration function …

<script>
  var a = 1;//  Variable declaration 
  function b(y){// Function declaration 
    var x = 1;
    console.log('so easy');
  };
  var c = function(){// It is a variable declaration, not a function declaration! ! 
    //...
  }
  b(100);
</script>
<script>
  var d = 0;
</script>

Let's see what the engine does to this code

1. The page generation creates the GO global object (Global Object) (also known as the window object)

2. The first script file is loaded

3. After the script is loaded, analyze whether the syntax is legal

4. Start precompiling

Find the variable declaration as an GO attribute, and the value is assigned to undefined
Find the function declaration, as an GO attribute, and assign the value to the function body

// Pseudocode 
GO/window = {
  // Page Load Creation GO At the same time, a document , navigator , screen And so on attribute, omitted here 
  a: undefined,
  c: undefined , 
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

Interpret the execution code (until the function b is executed)

// Pseudocode 
GO/window = {
  // Variables are initialized with the execution flow 
  a: 1,
  c: function(){
    //...
  },
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

Precompilation occurs before the function b is executed

Creating an AO Active Object (Active Object) Find formal parameters and variable declarations, with values assigned to undefined Real parameter values are assigned to formal parameters Find the function declaration, and assign the value to the function body

// Pseudocode 
AO = {
  // Create AO At the same time, a arguments And so on attribute, omitted here 
  y: 100,
  x: undefined
}

Explain the code in the execution function

After the first script file is executed, load the second script file

After the second script file is loaded, parse it

Syntax parsing is finished and precompilation begins

Repeat the initial precompile steps …

Attention, everyone,

In the pre-compilation stage, variable declaration and function declaration occur, there is no initialization behavior (assignment), and anonymous functions do not participate in pre-compilation

Variable initialization occurs only during interpretation run time

Hmm ~ finally close the tail 1

Summarize

Precompile (before function execution) *

1. Create an AO object (Active Object)
2. Find the function parameter and the variable declaration in the function. The parameter name and variable name are the attributes of AO object, and the value is undefined
3. The real parameter form parameter phase system 1, the real parameter value is assigned to the form parameter
4. Find the function declaration. The function name is the attribute of the AO object, and the value is the function reference

Precompile (before script code block script executes)

1. Find global variable declaration (including implicit global variable declaration, omitting var declaration). The variable name is the attribute of global object, and the value is undefined
3. Find the function declaration, the function name is the attribute of the global object, and the value is the function reference

Understanding pre-compilation is helpful in understanding issues such as promotion behavior, this pointing, scope, and performance

Thank you for reading, hope to help everyone, thank you for your support to this site!