Understand the JavaScript precompilation process with AO, GO objects based on variable promotion


A. answer B. question C. answer D. answer


What is precompilation?

The engine compiles the JavaScript code before interpreting it. Part of the compile phase is finding all the declarations and associating them with the appropriate scope.

Use GO objects to understand that precompilation occurs in the global scope

Precompile trilogy before global execution 1. create GO(Global Object) object () 2. Use the variable declaration as the attribute name of the GO object, and assign the value to undefined 3. Find the function declaration in the global, and assign the function name as the property name of the GO object, and the value to the function body

For example (example -1) :

console.log(a);//[Function: a]
var a = 1;
function a() {}console.log(a);/ / 1
Copy the code

Precompile the trilogy before global execution

1. Create the GO object

AO{



}

2. Find the variable declaration and use the variable declaration as the attribute name of the GO object with the value assigned to undefined

AO{a: undefined}

3. Find the function declaration in the global and assign the function name as the attribute name of the GO object with the value assigned to the function body

AO{a: undefined function(){}}

Execution process:

Var a = 1;

In fact, this line of code can be interpreted as var a; And a = 1; Declare and assign two operations. If a exists, the declaration operation is ignored. If no A exists, a variable is declared in the AO object, and its value is undefined.

// This line of code indicates that duplicate declarations of variables do not report errors
console.log(a);//undefined
var a = 0;
console.log(a);/ / 0
var a = 1;
console.log(a);/ / 1
Copy the code

AO{a: undefined function(){} 1}

Example -2 the reason for the output: promotion by function takes precedence over promotion by variable, and is not overwritten by variable declaration, but is overwritten by variable assignment.

Use AO objects to understand the precompilation process before a function is executed

1. Create an AO activation object. 2. Look for the parameter and variable declarations in the function body scope and use the parameter and variable declarations as the property names of the AO object with the value undefined. 4. Find the function declaration in the function body, and use the function name as the attribute name of the AO object. Assign the value to the function body

For example (example -2) :

function fn(a) {
    console.log(a);//1(first console.log())
    var a = 123;
    console.log(a);/ / 2
    function a() {}
    console.log(a);/ / 3
    var b = function() {}// Function expression
    console.log(b);/ / 4
    function d() {}
    var d = a;
    console.log(d);/ / 5
  }
  
  fn(1);
  
// Output result:
[Function: a]
123
123
[Function: b]
123
Copy the code

Precompile a tetralogy before a function is executed

  1. Creating an AO Object

AO{



}

2. Find the parameter and variable declaration in the function body scope and use the parameter and variable declaration as the property name of the AO object with the value undefined.

AO{

 a:undefined;

 b:undefined;

 d:undefined;

}

3. Unify arguments and parameters

AO {a: undefined; 1; B: undefined; D: undefined; }

  1. Find the function declaration in the function body and assign the function name as the property name of the AO object

AO {a: undefined; 1; The function () {} b: undefined; D: undefined; function() { } }

Execution process:

First console.log: the variable in the function’s execution environment is AO{a: undefined; 1; The function () {} b: undefined; D: undefined; function() { } }

2, 3, 4, 5 console.log: the variable in the execution environment of this function is AO{a: undefined; 1; function (){ }; 123; B: undefined; D: undefined; function() { } }

Q1: In Part 4, the initialization of a as a function(){} can be assigned to 123. A1: JS is a weakly typed dynamic language. Weak typing means THAT I don’t need to tell the execution engine the exact type of a variable dynamic language: the same variable can hold different types of data, so we find that the a variable can be function(){}, and then the assignment can change back to Number 123

end

The above is the content of this article, only the learning content of the personal learning record, if there is any mistake, welcome to point out the discussion!