Detailed description of the pre-Compilation Principle and JavaScript Compilation Principle in javascript

Detailed description of the pre-Compilation Principle and JavaScript Compilation Principle in javascript

Principle of JavaScript pre-Compilation

Today, I spent a lot of time reviewing the scope, pre-compilation, and other knowledge.

I read a lot of blog posts and opened the books I have read before (it seems that many books do not talk about pre-compilation)

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

I sorted out some messy ideas tonight.

Sort out the pre-compiled knowledge first, and explain the scope in detail later.

You must understand that this pre-compilation is different from the traditional compilation (you can understand the special compilation process of js pre-compilation)

JavaScript is an interpreted language,

Since it is an interpreted language, it is to compile a line and execute a line

Traditional compilation involves many steps, such as Word Segmentation, parsing, and code generation.

I will give you more time in the future

Next I will share with you the JS pre-compilation I understand.

JavaScript running Trilogy

What have the js engine done for script execution?

• Syntax analysis
• Pre-compile
• Explain execution

There are two steps before executing the code.

Syntax analysis is simple, that is, the engine checks whether your code has any low-level syntax errors.

As the name implies, the explain execution is the execution of the Code.

A simple understanding of pre-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 occur?

My original misunderstanding also happened here.

When does pre-compilation occur?

I hope you will not misunderstand the above running process,

The error is that the pre-compilation only occurs before the execution of the script code block.

There is nothing wrong with this.

Pre-compilation does occur before the script code is executed.

But most of it will happen before function execution.

JS pre-compiled instance

For example, consider the following 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 () {// is a variable declaration rather than a function declaration !! //...} B (100); </script> <script> var d = 0; </script>

Let's see what the engine has done for this code.

1. When the page is generated, the GO Global Object (that is, the window Object that everyone is familiar with) is created)

2. Load the first script file

3. Check whether the parsing syntax is valid after the script is loaded.

4. Start pre-Compilation

Search for the variable declaration. As a GO attribute, the value is assigned to undefined.
Find the function declaration, as the GO attribute, and assign the value to the function body.

// Pseudo-code GO/window = {// when a GO is created during page loading, attributes such as document, navigator, and screen are created. a: undefined, c: undefined, and B are omitted here: function (y) {var x = 1; console. log (so easy ');}}

Explain the Execution Code (until function B is executed)

// Pseudo-code GO/window = {// variable with execution flow get initialization a: 1, c: function (){//...}, b: function (y) {var x = 1; console. log (so easy ');}}

Pre-compiled before function B is executed

• Create an AO activity Object)
• Search for the form parameter and variable declaration, and assign the value to undefined
• The real parameter value is assigned to the form parameter.
• Find the function declaration and assign the value to the function body.
  

// Pseudocode AO = {// when creating AO, the arguments and other attributes are created. Here, y: 100, x: undefined} is omitted}

Explain the code in the execution function

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

Perform syntax analysis after the second script file is loaded.

Start pre-compilation after the syntax analysis is completed

Repeat the initial pre-compilation step ......

Note,

Variable declaration and function declaration in the pre-compilation phase, no initialization behavior (assign value), anonymous functions do not participate in pre-Compilation

Variables are performed only in the interpretation stage.Initialization

Hmm ~ Last close

Summary

Pre-compile (before function execution )※

1. Create an AO Object (Active Object)
2. Search for the function parameters and variable declarations in the function. The parameter name and variable name are the attributes of the AO object and the value is undefined.
3. Real parameters are unified, and real parameters are assigned to them.
4. Find the function declaration. The function name is the attribute of the AO object and the value is a function reference.

Pre-compile (before executing the script code block script)

1. Search for the global variable Declaration (including the implicit global variable declaration, omitting the var Declaration). The variable name is the attribute of the 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 a function reference.

Understanding pre-compilation is helpful for understanding the promotion behavior, this point, scope and performance issues.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!