JavaScript precompiled and implied global variables

Time:2021-9-17

1. Imply global variables

Undeclared variables are called implied global variables.

var a = 1; // Variables declared outside the function are called global variables
b = 2; //  Variables that are not declared outside or inside a function are called implied global variables
function fn() {
    var c = 3; // Variables declared in a function body are called local variables
    d = 4; //  Implied global variable
}
fn(); //  If the function is not executed, the function will not be precompiled and D will not be promoted to a global variable
console.log(c); // error: c is not defined
console.log(d); // 4

2. JavaScript execution process

1. Syntax analysis. If there are low-level syntax errors, it will not be compiled and executed;
2. Precompiling, including variable declaration in advance and function declaration in advance;
3. Explain and execute. Explain one line and execute one line.

3. Precompiling

Precompiling can be divided into global precompiling and function precompiling.

1. After the JS script is loaded, it will first check whether there are low-level errors;
2. Perform global precompiling after syntax detection;
3. After global precompiling, explain one line and execute one line;
4. When the line of function call is executed, the function will be precompiled first, and then executed next.

Global precompiling:

1. Create a global object go (window object);
2. In advance of variable declaration, put the declaration of all variables at the front as the attribute of go object,
   And assign undefined. If there are variables with the same name, only one is declared;
3. In advance of the function declaration, put the function declaration at the front as the attribute of the go object,
   If the function name is the same as the variable name, the variable name will be overwritten by the function name, and the value is the function body.
   This is why function definitions can be placed before or after function calls.

Function precompiling:

1. At the moment before the function is executed, the function precompile comes on stage;
2. First create an AO object (active object);
3. Declare formal parameters and variables in advance and assign undefined as the attribute of Ao;
4. Assign an argument to a formal parameter;
5. The function declaration is in advance, and the value is the function body as the attribute of Ao.

Chestnuts:

var a = 1;
function b(c){
    console.log(c);
    var c = 2;
    console.log(c);
    function c() {}
    var d = 3;
    function e() {}
}
b(4);

First analyze the global precompiling,

  • establishGOObject,GO = {}
  • Variable declaration in advance
//Pseudo code
GO = { 
    a = undefined
}
  • Function declaration in advance
//Pseudo code
GO = { 
    a = undefined
    b = f b(c) { console.log(c); ... }
}

Reanalysis function precompiling,

  • establishAOObject,AO = {}
  • Formal parameter and variable declaration in advance;
//Pseudo code
AO = { 
    C = undefined // the same as the variable name, only one is declared
    d = undefined
}
  • Assign an argument to a formal parameter;
//Pseudo code
AO = { 
    C = 4 // b (4), the passed in argument is 4
    d = undefined
}
  • Function declaration in advance
//Pseudo code
AO = { 
    C = f c() {} // the function name overrides the variable name
    d = undefined
    e = f e() {}
}

So print variables for the first timecWhen, it is the output function body, not the argument4

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]