JS run trilogy

Js running code is divided into three steps

  1. Syntax analysis
  2. precompiled
  3. Explain to perform

When JavaScript code is running, it will first conduct syntax analysis to check whether there are low-level errors in the code, then precompile, sort out a logic inside, and finally start executing the code line by line

Syntax analysis

Before the code is executed, the system scans it for low-level syntax errors, such as missing curly braces.

precompiled

Precompilation prelude

Precompilation occurs just before the function is executed. Var a = 1 ===> window.a = 1 var b = c = 4 var a = 1 ===> window.a = 1

Precompiled tetralogy

  1. Create an AO(Activation Object) Object that stores local variables inside the function.
  2. Find the parameter and variable declarations and use the variable and parameter names as AO attribute names with the value undefined
  3. Unify arguments and parameters
  4. Find the function declaration inside the function body and assign the value to the function body

Use an example to illustrate, or you can give an answer before you move on

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);
Copy the code

The first step is to create an Activation Object (AO) {}. The second step is to find the parameter and variable declaration and use the variable and parameter names as the AO property names with the value undefined

{
	a: undefined.b: undefined,}Copy the code

Third, unify the arguments and parameters

{
	a: 1.b: undefined,}Copy the code

Step 4, find the function declaration and assign the value to the function body

{
	a: function a() {},
  b: undefined.d: function d() {}}Copy the code

So at the moment before the execution of function fn, the values of a, b and d are shown above, so the result of the execution of fn(1) is

/ / ƒ (a) {}
/ / 123
/ / 123
/ / ƒ () {}
/ / ƒ (d) {}
Copy the code

In the global scope, the precompilation process is slightly different

  1. Create the GO(Global Object) Object (which stores the Global variables inside the function) GO === window
  2. Find the parameter and variable declarations and use the variable and parameter names as the GO attribute names with the value undefined
  3. Find the function declaration inside the function body and assign the value to the function body

Explain to perform

Execute code line by line

Practice topic

Here are a couple of examples, if you’re interested

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);
Copy the code
global = 100;
function fn() {
  console.log(global);
  global = 200;
  console.log(global);
  var global = 300;
}
fn();
var global;
Copy the code
function test() {
  console.log(b);
  if (a) {
    var b = 100;
  }
  c = 234;
  console.log(c);
}
var a;
test();
a = 10;
console.log(c);
Copy the code

conclusion

In most cases, we handle a precompilation process in this way

  • Function declaration, overall promotion
  • Variable declaration, declaration of promotion

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