What is an execution context

An execution context is an abstract concept used to describe the environment of JavaScript execution, which records the information during the execution of the code. Generally, there are several types:

  • Global execution context
  • Function execution context
  • Eval Execution context

Execution stack

The tool used to manage the execution context, a lifO call stack, at the beginning of the program, will first appear a global execution context, after each call function, will generate a function execution context and push the stack, after the completion of the function execution, unstack and is recycled by GC, the following uses a case to explain

var name = 'xiaoming';

function person() {
    function people() {
        console.log(name);
    }
    
    people();
}

person();
Copy the code

The following steps walk through the creation and reclamation of the execution context in the above example

create
  1. At the start of code execution, global variables are initialized by creating and pushing the global execution contextnameAnd global methodsperson
  2. callpersonMethod to create and push the person function execution context and initialize the people method
  3. callpeopleMethod to create and push the people function execution context and initialize the console method
  4. callconsoleMethod to create and push the console function execution context

recycling

After each call is completed, it is successively unstacked from the top layer and collected by GC. The idea of the creation process is not explained here, as shown in the following figure

Create the execution context

The creation of an execution context does two things

  • Create lexical environment component: Specifies a lexical environment object that resolves identifier references created by code within the execution environment.
  • Create variable environment component: Specifies a lexical environment object whose environment data is used to hold bindings created by code within that execution environment via VariableStatement and FunctionDeclaration.
  • This binding: Specifies the value associated with the this keyword in the ECMA script code within the execution environment.

Lexical environments refer to another article, “JavaScript Lexical Environments”

VariableEnvironment

Variable environment components Components and lexical environment components are both lexical environment objects, different from variable environment only store variables declared by var function

Var and let and const

  • Activate in advance

A variable declared by let/const is

, called when undeclared gets Uncaught ReferenceErro, Also known as a temporary dead zone. Variables declared by var are pre-declared and assigned undefined when initialized

console.log(name); // Uncaught ReferenceErro
let name = 'xiaoming';
// -----
console.log(name); // undefined
var name = 'xiaoming';
Copy the code
  • scope

The other big difference is that let/const is block-level scoped. In a Block or CaseBlock, a block-level scope is created, and variables declared in let/const are strongly bound to this scope, which in short cannot be retrieved externally. Var is not

if (true) {
    var name = 'xiaoming';
    let age = 18;
}
console.log(name); // xiaoming
console.log(age); // age is not defined
Copy the code

If you understand all of the above, this code should not confuse you

var name = 'xiaoming';
function sayName() {
    console.log(age);
    if (name === 'xiaoming') {
        var age = 'xiaodong'
        console.log(name);
        let name = 'xiaodong';
    }  
}
sayName();
Copy the code

Activate in advance

Pre-activation can also be called variable promotion. As we know above, variables declared by var are pre-initialized and set to undefined at compile time because JavaScript generates the global context function context during lexical parsing and initializes assignment

conclusion

Summary of the execution context creation -> Execution -> reclamation process

  1. Create lexical environment for global context, declarative environment record, object environment record
  2. The outer point to null
  3. Create a variable environment for the global context as described above
  4. This points to window
  5. Create a lexical environment for a function context, such as a global context
  6. Outer points to, depending on what it might beGlobal context/patriarchal environment
  7. This points to the
  8. Enter the function execution phase
  9. After the function completes, the GC collects it

Re – study, such as mistakes, welcome correction, mutual encouragement