Js precompiled

Js is precompiled before execution. A GO, or global scope, is generated, and a local scope AO is formed when a method is called.

When global code is executed, variables are promoted, attributes are added to the global scope, functions (created from function declarations) are promoted, and code execution takes place.

1. Global precompile GO(Global Object)

  1. Create the GO object, window
  2. Assign undefined to the global variable
  3. The function name declared by the global function is used as the key and value is assigned to the GO object as a whole

2. Function precompilation AO (Activation Object)

  1. Creating an AO Object
  2. Stores the parameter and variable declarations in the function into the AO object with the value undefined
  3. Unify arguments and parameters
  4. The name declared by the function inside the function is used as the key of the AO object, and the whole content of the function is stored in the AO object as value

Here’s an example:

function f(a){ console.log(a); var a=123; console.log(a); The function () {} var b = function () {} function d () {}} f (1) / / ƒ () {} / / 123 aCopy the code

Code analysis:

  1. Creating an AO Object
AO={}
Copy the code
  1. Find the parameter and variable declarations and use the variable and parameter names as AO property names with the value undefined
AO={
    a:undefined,
    b:undefined
}
Copy the code
  1. Unify argument values and parameters
AO={
    a:1,
    b:undefined
}
Copy the code
  1. A = function a() {} a = function a() {}
AO={
 a:function a(){},
 b:undefined,
 d:function d(){}
}
Copy the code

Function a(){} = function a(){} = function a(){} =123

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

3. Precompile summary

  • Overall function declaration improvement -(specifically, the system always moves the function declaration before or after the function call)
  • Variable declaration promotion -(specifically, the system always moves the declaration to the front of the call, regardless of the position of the declaration. Note that it is only the declaration, so the value is undefined)
  • Any variable that is assigned an undeclared value belongs to the global variable. (Global is Window)
  • All declared global variables are properties of the window; var a = 12; = Window. A = 12;
  • Function precompilation occurs just before the function is executed.

Variable ascension

As mentioned above, variable promotion: Function variable declarations are stored in the AO object with the value undefined during precompilation

console.log(name)   // 'undefined'
var name = 'John Doe'
console.log(name)   // John Doe
Copy the code

Let & const promotion

console.log(a)  // ReferenceError: a is not defined
let a = 3
Copy the code

Function, var, let, const, and class are all “promoted”. However, variables declared by lets and const are not initialized to undefined, only at runtime when the JavaScript engine encounters their lexical binding (assignment). This means that the JavaScript engine cannot access the variable until it has been declared.

let a
console.log(a)  // undefined
a = 5
Copy the code

The class promotion

Like let and const, classes are “promoted” in JavaScript and are not initialized until they are actually assigned.

let peter = new Person('John', 25) // ReferenceError: Person is not defined
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let John = new Person('Tom', 18); 
console.log(John) // Person { name: 'Tom', age: 18 }
Copy the code

exercises

helloWorld(); // TypeError: helloWorld is not a function var helloWorld = function(){ console.log('Hello World! '); } //Uncaught TypeError: helloWorld is not a functionCopy the code
helloWorld(); function helloWorld(){ console.log('Hello World! '); } //Hello World!Copy the code
foo();
var foo; 
function foo(){
    console.log('tom');
}
foo = function(){
    console.log('jack');
}
//tom
Copy the code

The interview questions,

var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
  var name = 'Jack';
  console.log('Goodbye ' + name);
} else {
  console.log('Hello ' + name);
}
})();
//Goodbye Jack
Copy the code

Deformation of a

var name = 'Tom';
(function(name) {
if (typeof name == 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})(name);
//Hello Tom
Copy the code

Deformation of the second

var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
        let name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();
//Hello Tom
Copy the code