JavaScript has a precompile mechanism, which is not a feature in some languages such as Java. It is precisely because of this precompile mechanism that causes some problems of variable promotion in JS. The following two sentences can solve some problems in development, but cannot solve all problems. There are also issues that you have to learn to precompile to solve.

  1. Function declaration overall promotion
  2. Variable declaration promotion (* note variable declaration)

A JS function is always called after the function declaration. Even if your call is written before the function declaration, it is implicitly called after the function declaration.

When does precompile occur

Precompilation is divided into global precompilation, which occurs when a page has finished loading, and local precompilation, which occurs just before function execution.

Tip: Variable declaration and function declaration occur during precompilation. There is no initialization behavior (assignment). Anonymous functions do not participate in precompilation. Variables are initialized only during the explain execution phase.

Js runs three steps

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

Precompile the prelude

Imply Global implies global variables, any variable that is assigned to a global object if it is not declared. All declared global variables and undeclared variables are owned by window.

Such as:

var a = 123;
window.a = 123;
Copy the code

B = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b = window.b

Function test(){// b is an undeclared variable, so it is owned by window. var a = b = 110; }Copy the code

Precompile step

First, the execution of JavaScript will scan the overall syntax statement. If there is a logic error or syntax error, then the error is directly reported and the program stops executing. If there is no error, it starts to interpret and execute each line from top to bottom.

Four steps for local precompilation:

  1. Create an AO Object (Activation Object) execution context.
  2. Find the parameter and variable declarations and use the variable and parameter names as the AO attribute names with undefined values
  3. Unify argument values and parameters.
  4. Find the function declaration in the function body, and assign the value to the function body.

Global precompile in three steps:

  1. Create a Global Object (GO Object).
  2. Find the variable declaration and use the variable name as the GO attribute name with undefined
  3. Find the function declaration, as the GO attribute, with the value given to the function body

Since there is no concept of global parameters, the step of parameter unification is omitted.

Tip: GO objects are globally precompiled, so they take precedence over AO objects created and executed

Consolidating basic exercises

Example of an AO object

Function fn(a){console.log(a); Var a = 123; // Var a = 123; console.log(a); Function a(){}; console.log(a); Var b = function(){}; console.log(b); // Function d(){}; } // Call function fn(1);Copy the code

Step 1: Create an AO object

AO{ 

}
Copy the code

Step 2: Find the parameter and variable declaration, and use the parameter name and variable name as the attribute name of the AO object

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

Step 3: Unify the argument values with the parameters

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

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

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

The final output result:

Function fn(a){console.log(a); Var a = 123; fn(); var a = 123; // At this point, the function is overwritten by 123 because assignment is not promoted; // 123 // function a(){}; // This is promoted, ignore console.log(a); Var b = function(){}; console.log(b); Function d(){}; } // Call function fn(1);Copy the code

When the function completes, the AO object is destroyed.

Examples of GO objects

global = 100;
function test(){
	console.log(global);	
	var global = 200;
	console.log(global);
	var global = 300;
}
test();
var global;
Copy the code

Step 1: Create the GO object

GO{

}
Copy the code

Step 2: Find the variable declaration, use the variable name as the GO attribute name, and the value is undefined

GO{global: undefined}Copy the code

Step 3: Find the function declaration and, as the GO attribute, assign the value to the function body

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

Step 1: Create AO objects

AO{
      
}
Copy the code

Step 2: Find the parameter and variable declaration, and use the parameter name and variable name as the attribute name of the AO object

AO{
     global: undefined
}
Copy the code

6. Local precompile Step 3: Unify argument values and parameters (this function has no parameters)

AO{
     global: undefined
}
Copy the code

Step 4: Find the function declaration in the function body, and assign the value to the function body. (There is no function declaration in this function)

AO{
     global: undefined
}
Copy the code

Most result:

global = 100; function test(){ console.log(global); // Use undefined var global = 200; // At this point, 200 overwrites undefined console.log(global); // 200 var global = 300; } test(); var global;Copy the code

For example, if there is no global variable inside the function body, this means that the AO object will have the global property. What if there isn’t? It’s going to look in the GO object, which is basically the proximity principle.

Example 3:

<script>
var a = 1;
console.log(a);

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

var c = function (){
console.log("I at C function");
}
console.log(c);

test(2);
</script>
Copy the code

Here are the results:

The analysis process is as follows:

  1. When the page is generated, the GO Global Object (the window Object) is created.
  2. The first script file is loaded;
  3. After the script is loaded, check whether the syntax is valid.
  4. Start precompiling the lookup variable declaration, as the GO attribute, and assign the value to undefined; Find the function declaration, as the GO attribute, with the value given to the function body;

precompiled

GO/window = {a: undefined, c: undefined, test: function(a) {console.log(a); var a = 123; console.log(a); function a() {} console.log(a); var b = function() {} console.log(b); function d() {} } }Copy the code

Interpret the execution code (until the test(2) statement is executed)

GO/window = {a: 1, c: function (){console.log("I at c function"); } test: function(a) { console.log(a); var a = 123; console.log(a); function a() {} console.log(a); var b = function() {} console.log(b); function d() {} } }Copy the code

Precompilation occurs before the function test() is executed

  1. Create an AO Active Object.
  2. Find parameter and variable declarations, assign value to undefined;
  3. The argument value is assigned to the parameter;
  4. Find a function declaration with a value given to the function body;

The steps 1 and 2 before precompilation are as follows:

AO = {a:undefined, b:undefined,}Copy the code

Step 3 of the precompilation is as follows:

AO = {a:2, b:undefined,}Copy the code

Step 4 of the precompilation is as follows:

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

The following procedure changes when the test() function is executed:

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

Example 4:

 <script>
        console.log(a)
        var a = 100
        console.log(a)
        function a() {
            console.log(111)}console.log(a)
/* 1.js engine integrates all script tags to produce window object 2. Look for the declaration of the variable, using a as the name of the property of the window object whose value is undefined 3. Look for the declaration of the function, and use the name a as the property name of the window object. The property value is function, and undefined is replaced by 4. When the global precompile is complete, the code is executed from top to bottom. If there are variables and functions with the same name, the function takes precedence because finding the function declaration in the second step overrides the variable declaration */
    </script>
Copy the code

Results:

Note:

In the precompilation phase, variable declaration and function declaration occur. There is no initialization behavior (assignment). Anonymous functions do not participate in the precompilation. Variables are initialized only during the explain execution phase;

Precompile (before function execution)

  1. Create an AO Object (Active Object)
  2. Look for function parameters and variable declarations within the function. The parameter names and variable names are attributes of the AO object, and their values are undefined
  3. The argument parameters are unified, and the value of the argument is assigned to the parameter
  4. Find a function declaration with the function name as a property of the AO object and the value as a function reference

Precompile (before the script block is executed)

  1. Find a global variable declaration (including an implicit global variable declaration, omitting the var declaration) whose name is a property of the global object and whose value is undefined
  2. Find a function declaration with the function name as a property of a global object and the value as a function reference

Precompile summary

  • Overall function declaration promotion -(specifically, the system always moves the function declaration to the front of the call, regardless of where the call and the declaration are located)
  • Variable declaration promotion -(specifically, the system always moves the declaration to the front of the call, regardless of where the variable is called or declared. Note that it is only a declaration, so the value is undefined)
  • Function precompilation occurs just before the function is executed.