Execution context

JS code runs in an execution context.

type

  1. Global execution context
    • Create a global Window object (in browser case)
    • Set this to be equal to the global object
  2. Function execution context
    • Each function has its own execution context, but is created when the function is called
  3. The Eval function executes the context
    • Code executed inside the eval function also has its own execution context

Execution stack (call stack LIFO)

Used to store all execution contexts created while the code is running.

When the JavaScript engine first encounters a script —–> creates a global execution context and pushes the current execution stack —–> when the engine encounters a function call —–> it creates a new execution context for that function and pushes the top of the stack —–> when the function completes execution —–> Execution context pops up from the stack —–> control flow to the next context in the current stack

Create execution context

There are two types of lexical environment

  1. The global environment
  2. In a function environment, user-defined variables within a function are stored in the environment logger. And the referenced external environment may be the global environment, or any external function that contains this internal function.

1. Creation phase

  1. This binding
    • Global: This refers to the global object (in browsers this refers to the window object)
    • Function: The value of this depends on how the function is called
      • If it is called by a reference object, this will be set to that object
      • Otherwise, the value of this is set to global or undefined (in strict mode).
  2. Create the lexical environment component
    • Environmental recorder
      • The environment logger is the actual location where variable and function declarations are stored
      • Two types of
        • Declarative environment loggers store variables, functions, and parameters
        • The object environment logger is used to define the relationship between variables and functions that appear in the global context.
        • In a global environment, the environment logger is the object environment logger. In a functional environment, the environment logger is the declarative environment logger.
    • A reference to an external environment
      • A reference to the external environment means that it has access to its parent lexical environment (scope)
  3. Create the variable environment component
    • The variable environment is also a lexical environment whose environment logger holds the binding relationships created in the execution context of the variable declaration statement.
    • In ES6, one difference between a lexical environment component and a variable environment is that the former is used to store function declarations and variable (let and const) bindings, while the latter is used only to store var variable bindings.

2. Implementation phase

At this stage, all of these variables are allocated and the code is executed.

Each execution context has three important properties

  • Variable Object (VO)
    • Stores variable and function declarations defined in the context
      • A variable object in a global context
        • Global object
      • A variable object in the context of a function
        • Analysis of AO
        • perform
  • Scope chain
  • this

The variable object

Variable objects are execution context-specific data scopes that store variable and function declarations defined in the context.

classification

  1. A variable object in a global context
  2. A variable object in the context of a function

The scope chain

The scope of a function is determined when the function is defined.

The function has an internal property [[scope]], into which all the parent objects are stored when the function is created. You can understand that [[scope]] is a hierarchy of all the parent objects, but note that [[scope]] does not represent the full scope chain!

When a function is activated, the active object is added to the front of the action chain after the VO/AO is created in the function context.

this

demo

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();
Copy the code
  1. The checkScope function is created to save the scope chain to the inner property [[scope]]
checkscope.[[scope]] = [
    globalContext.VO
];
Copy the code
  1. Execute the checkScope function, create the checkScope function execution context, the checkScope function execution context is pushed into the execution context stack
ECStack = [
    checkscopeContext,
    globalContext
];
Copy the code
  1. The checkScope function is not executed immediately. The first step is to copy the function [[scope]] property to create the scope chain
checkscopeContext = {
    Scope: checkscope.[[scope]],
}
Copy the code
  1. Step 2: Use arguments to create the active object, and then initialize the active object by adding parameters, function declarations, and variable declarations
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: checkscope.[[scope]],
}
Copy the code
  1. Step 3: Press the live object into the top of the CheckScope chain
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}
Copy the code
  1. With all the preparation done, start executing the function, modifying the AO property values as the function executes
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}
Copy the code
  1. The value of scope2 is found, the function is executed, and the function context is popped from the execution context stack
ECStack = [
    globalContext
];
Copy the code

Reference article:

Execution context

The variable object

The scope chain