Analysis of JavaScript precompilation principle

Today I spent a lot of time reviewing knowledge about scope, precompilation, etc.

I read a lot of blog posts and opened books I have read before (it seems that many books do not talk about precompilation) )
I found that I thought I learned very clearly at first, but in fact there are still some misunderstandings
(Many blog posts are misleading)
I will sort out the messy ideas tonight
Let’s sort out the pre-compiled ones first Knowledge, I will explain the scope in detail when I have time in the future

---

Everyone must understand that this pre-compilation is different from traditional compilation (you can understand that js pre-compilation is a special compilation process)
JavaScript is an interpreted language.
Since it is an interpreted language, it means compiling one line and executing one line.
Traditional compilation will go through many steps, such as word segmentation, parsing, and code generation.
I will give you more information when I have time in the future. Everyone’s popular science
Let me share with you what I understand about JS pre-compilation

JavaScript running trilogy

What does the script execution js engine do?

1. Syntax analysis

2. Pre-compilation

3. Explanation and execution

There are two steps before executing the code
The syntax analysis is very simple, that is, the engine checks whether your code has any low-level syntax errors
Explanation and execution, as the name suggests, is to execute the code
Preliminary The simple understanding of compilation is to open up some space in the memory and store some variables and functions
Understanding pre-compilation is also helpful for everyone to understand the scope

When does JS pre-compilation happen

Me The original misunderstanding also occurred here
When does precompilation occur?
I hope you will not let the above running process cause you to misunderstand.
Misunderstanding that precompilation only occurs before the code block in the script is executed
This is not wrong
Pre-compilation does indeed occur before execution in the script code
But most of it occurs before function execution

JS pre-compilation example

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

• Variable declaration var…

• Function declaration function…

<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log(&#39;so easy&#39;);
    };    var c = function(){//是变量声明而不是函数声明！！
        //...
    }
    b(100);</script><script>
    var d = 0;</script>

Let’s see what the engine does to this code

• The GO global object (Global Object) is created when the page is generated. (That is, the window object that everyone is familiar with)

• The first script file is loaded

• After the script is loaded, analyze whether the syntax is legal

• Start pre-compilation
  

• #Find the variable declaration as a GO attribute, and assign the value to undefined

• Find the function declaration, as a GO attribute, the value is assigned to the function body

//伪代码GO/window = {    //页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
    a: undefined,
    c: undefined，
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}

• Explain the execution code (until function b is executed)

//伪代码
GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}

• Before executing function b, pre-compilation occurs
  

• Create AO active object (Active Object)

• Search for formal parameters and variable declarations, assign the value to undefined

• Assign the actual parameter value to the formal parameter

• Find the function declaration and assign the value to the function body

//伪代码AO = {    //创建AO同时，创建了arguments等等属性，此处省略
    y: 100,
    x: undefined}

• Explain the code in the execution function

• ## After the first script file is executed, the second script file is loaded

• After the second script file is loaded, syntax analysis is performed

• After the syntax analysis is completed, start pre-compilation

  
  

• Repeat the initial pre-compilation step...

Everyone It should be noted that

Variable declaration and function declaration occur during the pre-compilation phase, there is no initialization behavior (assignment), and anonymous functions do not participate in pre-compilation
Variables will only be made during the interpretation and execution phase Initialization Well~finally wrap up

Summary

Pre-compilation (before function execution)※

1. Create AO object (Active Object)
2 . Find function formal 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. Find the function declaration, the function name is used as an attribute of the AO object, and the value is the function reference

Precompiled (before the script code block script is executed)

1. Find the global variable declaration (including implicit global variable declaration, omitted var declaration), the variable name is used as an attribute of the global object, and the value is undefined
3. Find the function declaration, the function name is used as an attribute of the global object, and the value is a function reference

---

Understanding precompilation Improving behavior, this pointing, scope and performance issues are of great help

I will also summarize these issues in the future

The above is the content of the analysis of JavaScript precompilation principles. For more related content, please pay attention to PHP Chinese website (www.php.cn)!