Let’s take a look at JavaScript precompilation (summary)

JS running trilogy

js running code is divided into three steps

• Syntax Analysis
• Precompilation
• Interpretation

When JavaScript code is running, it will first perform syntax analysis to check whether there are low-level errors in the code, then pre-compile, organize the internal logic, and finally start executing the code line by line.

Syntax Analysis

Before executing the code, the system will scan the entire code to check whether there are any low-level syntax errors, such as missing a curly brace.

Precompilation

Pre-compilation prelude

Precompilation occurs just before a function is executed. The variable is assigned a value without being declared, and the variable is owned by the global object

a = 3

var b = c = 4

All declared global variables are window properties

var a = 1 ===> window.a = 1

Four steps of precompilation

1. Create an AO (Activation Object) object (which stores local variables within the function)
2. Find the parameter and variable declarations, and use the variable and parameter names as AO attribute names with values ​​of undefined
3. Unify actual parameters and formal parameters
4. Find the function declaration in the function body and assign the value to the function body

Let me explain this with an example. You can also give an answer yourself before continuing.

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

The first step is to create an AO (Activation Object) object. The second step is to find the formal parameters and variable declarations, and use the variable and formal parameter names as AO attribute names with values ​​of undefined.

{
 a: undefined,
 b: undefined,
}

The third step is to unify the actual parameters and formal parameters

{
 a: 1,
 b: undefined,
}

Step 4: Find the function declaration and assign the value to the function body

{
 a: function a() {},
 b: undefined,
 d: function d() {}
}

So just before the function fn is executed, the values ​​of a, b, and d are as shown above

So the result of executing fn(1) is

// ƒ a() {}
// 123
// 123
// ƒ () {}
// ƒ d() {}

In the global scope, the precompilation process is slightly different

• Create a GO (Global Object) object (which stores global variables inside the function) GO === window
• Find the parameter and variable declarations, and use the variable and parameter names as GO attribute names with values ​​of undefined
• Find the function declaration in the function body and assign the value to the function body

Interpretation

Execute code line by line

Practice Questions

Here are a few examples, if you are interested, you can take a look

function test(a, b) {
 console.log(a);
 console.log(b);
 var b = 234;
 console.log(b);
 a = 123;
 console.log(a);
 function a() {}
 var a;
 b = 234;
 var b = function() {};
 console.log(a);
 console.log(b);
}
test(1);

global = 100;
function fn() {
 console.log(global);
 global = 200;
 console.log(global);
 var global = 300;
}
fn();
var global;

function test() {
 console.log(b);
 if (a) {
  var b = 100;
 }
 c = 234;
 console.log(c);
}
var a;
test();
a = 10;
console.log(c);

Summarize

In most cases, we use the following method to handle the precompilation process:

• Function declaration, overall improvement
• Variable declaration, declaration promotion

If you encounter a complex situation, you can only use the most primitive way to solve the problem.

This is the end of this article about understanding JavaScript precompilation (summary). For more relevant JavaScript precompilation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!