1. Basic concepts

  • What is an execution context? When a function is executed, an execution context is created. This execution context is called an execution context.

  • How is data stored? Will create a variable in execution context object (variable object), basic data types of variable names and values are saved in the variable object, of the reference type is stored in the heap, variable object is stored in the memory address, memory address refers to the value of specific, we can by manipulating objects to manipulate the object reference address.

  • Basic data type and reference data type classification: there are 7 basic data types, namely Undefined, Null, Boolean, Number, String, BigInt (new in ES10) and Symbol (new in ES6). Reference data type has 1 Object.

    1.1. Data storage. Below, the author describes how data is stored by demo and figure

    function data () {
        var a = 1;
        var b = {
            name: 'jack'
        }
        var c = [1.2.3];
    }
    
    // Execution context
    let ExecutionContext = {
        // A variable object
        VO: {
            a: 1.b: '0x1111'.c: '0x2222'}}Copy the code

1.2. Data operation. Assignment of basic data type is the copy of value, which is the copy of value itself;

    var a = 1;
    var b = a;
    b = 2;
    console.log(a); / / 1
    var ExecuteContext = {
        VO: { a: 1}}; ExecuteContext.VO.b = ExecuteContext.VO.a; ExecuteContext.VO.b =2;
    console.log(ExecuteContext.VO.a); / / 1
Copy the code

Reference data type assignment, copy the reference address pointer;

    var m = { a: 1.b: 2 };
    var n = m;
    n.a = 10;
    console.log(m.a); / / 10
    var ExecuteContext = {
        VO: { m: { a: 1.b: 2}}}; ExecuteContext.VO.n = ExecuteContext.VO.m; ExecuteContext.VO.n.a =10;
    console.log(ExecuteContext.VO.m.a); / / 10
Copy the code

2. Perform context classification

  • Js code will enter an execution context during execution, which can be understood as the running environment of the current code

  • The running environment in JS is mainly divided into global execution context and function execution context

    • There is only one global execution context, which is typically created by the browser on the client side, namely the familiar Window object, which can be accessed directly through this. (window === this?)
    • The window object is also the carrier of global variables declared by var. Global variables created by var can be directly accessed by Window.

3. Execute the context stack

  • Multiple execution contexts are generated during JS execution, and the JS engine manages these execution contexts by stacks
  • The execution context stack, also called the Call stack, is used to store all contexts created during code execution. LIFO (Last in First out) features LIFO (Last in First out) and LIFO (Last in First out)
  • The bottom of the stack is always the global context (Window), and the top is the currently executing context
  • When a function is executed, a new execution context is generated and put into the call stack. After execution, the stack is automatically removed
    function one() {
    var a = 1;
    debugger;
    function two() {
        var b = 1;
        debugger;
        function three() {
            var c = 1;
            debugger;
        }
        three();
        debugger;
    }
    two();
    debugger;
}
one();
var globalExecuteContext = {
    VO: { setTimeout: 'setTimeout'}}var executeContextStack = [globalExecuteContext];
var oneExecuteContext = {
    VO: { a: 1 }
}
executeContextStack.push(oneExecuteContext);
var twoExecuteContext = {
    VO: { b: 2 }
}
executeContextStack.push(twoExecuteContext);
var threeExecuteContext = {
    VO: { c: 3 }
}
executeContextStack.push(threeExecuteContext);
console.log(executeContextStack);

executeContextStack.pop();
executeContextStack.pop();
executeContextStack.pop();
Copy the code

4. Lifecycle of execution context

  • The life cycle of a new execution context has two phases: the creation phase and the execution phase

    • Create a stage

      • Creating a variable object
      • Determine scope linkage
      • Make sure this points to

    • Execution phase

      • Variable assignment
      • Function assignment
      • Code execution

  • Variable Object (VO)

    • Variable objects hold variable declarations (var), function arguments (arguments), function definitions (function).

      • The variable object first gets the parameter variables and values of the function
      • Get all the usefunctionThe function name is the property name of the variable object. The value is the function object. If the property already exists, the value is overwritten with the new value
      • After that, all the keywords of var will be declared as variables. Every time a variable declaration is found, an attribute will be built on the variable object with the value ofundefinedIf the variable name already exists, the value of the original attribute will be skipped.letDeclared variables are not processed at this stage

  • Active Object (AO)

    • In the function call stack, if the current execution context is at the top of the function call stack, it means that the current context is active. The variable Object is called an Activation Object and changes from VO to AO.

    • The active object contains all the properties of the variable object and contains the this pointer

function one(m) {
    function two() {
        console.log('two');
    }
}
one(1);

// Execute VO=>AO
let VO = AO = {
    m:1.two: () = > { console.log('two'); }},// Execution context
let oneEC={
    VO,
    this: window.// Scope chain
    scopeChain:[VO,globalVO] 
}
Copy the code

  • The variable object of the global context

    • In the browser, the global object is window
    • The variable object of the global context is window and cannot be activated to become an active object
    • The global context exists for as long as the browser window is open, and all contexts have direct access to properties on the global context variable object
    • Only variable objects in the global context are allowed to be accessed indirectly through the VO attribute name; VO objects cannot be accessed directly in a function context
    • Before entering the execution phase, the attributes of the object can access, but after entered the stage of execution, the variable object into active objects, the inside of the attributes can be visited, for function context, active objects and object variables are the same object, but are in different life cycle of the execution context

End

This article is more like recording notes, there are wrong places, I hope you big guy more correct.