precompiled

First, let’s talk about what precompilation is: we can see exactly how code runs and in what order, but computers don’t necessarily understand it. In JS, there is a V8 engine, which can be visually split into two departments, “compilation” and “execution”. When executing code, the engine first asks the “compilation department” to compile the JS code into something the engine can read. This process is called precompilation. Precompilation must occur before code execution (and in some cases when code execution takes place)

A precompiled type

Precompilation is divided into function precompilation and global precompilation: function precompilation occurs just before the function is executed, while global precompilation occurs when the page is finished loading.

Function precompile “tetralogy”

  1. Create an ACTIVATION Object (AO)
  2. Find the parameter and variable declarations as the attribute names of AO objects with the value undefined
  3. Unify arguments and parameters
  4. Find the declaration in the function body and assign the function name as the property name of the AO object with the value assigned to the function body
  • Example:
  function fn(a) {
      console.log(a); // function() {}
      var a = 123;
      console.log(a); / / 123
      function a() {}
      console.log(a); / / 123
      var b = function() {}
      console.log(b); // function() {}
      function d() {}
      var d = a
      console.log(d); / / 123
    }
    fn(1)
Copy the code

Step 1: Create the AO object

AO{
}
Copy the code

Step 2: Find the parameter and variable declarations and assign undefined

AO{
	a:undefined 
    b:undefined 
    d:undefined
}
Copy the code

Step 3: Unify the arguments and parameters

AO{
	a:1 // 1 overwrites undefined
    b:undefined 
    d:undefined
}
Copy the code

Step 4: Find the function declaration

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

When fn is executed, the value of AO changes:

 	AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123.b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123.b:function() {}
        d:function d() {}}Copy the code

When we finished the four steps, we followed the code line by line, and the answer was clear.

function() {}
123
123
function() {}
123
Copy the code
Note:

Here’s the difference between a function declaration and a function expression. Function declarations are not equal to function expressions; they have different forms. Function expressions, var b = function(){} assign a function to a variable to form an expression. Function a() {} is a function declaration.

Globally precompiled “Trilogy”

  1. Create a GO object (Global Boject)
  2. Find the variable declaration as the property 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
  • Example:
	var global = 100
    function foo() {
      console.log(global); // undefined
      global = 200
      console.log(global); / / 200
      var global = 300
    }
    foo()
Copy the code

Step 1: Create the GO object

GO{
}
Copy the code

Step 2: Find the global variable declaration and assign it to undefined

GO{
	global: undefined 
}
Copy the code

Step 3: Find the function declaration

GO{
	global: undefined 
	fn: function() {}}Copy the code

At this point we have found the global scope, but there is one more function scope. Use tetralogy. It should be:

GO{
	global: undefined 
	fn: function() {}}AO: {
    global: undefined 
    }
Copy the code

Function foo, AO, and GO:

GO{
	global: 100 
	fn: function() {}}AO: {
    global: undefined 
    }
    
--->

GO{
	global: 100 
	fn: function() {}}AO: {
    global: 200
    }
    
--->
GO{
	global: 100 
	fn: function() {}}AO: {
    global: 300
    }
Copy the code

After executing the first console.log(global); “, some people would say output 100, because global in GO has the value 100, but in fact output undefined, because global is already found in the function scope with the value undefined. So the output is undefined.

Final result:

undefined
200
Copy the code

conclusion

If there is an if statement in your code, ignore it during the precompilation phase.