Execution context stack

Everyone knows js is single-threaded, so that means it can only do one thing at a time, and a js file is bound to perform multiple operations, such as global code, function code, every execution will generate multiple execution context, js the stack in the way to deal with it, we all know that after the execution of the stack is advanced, Therefore, the global execution context is always at the bottom of the stack, leaving the program at the end of execution

Let's simulate the process of executing a context stack as an example

    <script>
          
          function EC() {let b = 1 
              console.log(b)
          }
          EC()

    </script>
Copy the code

1. First, we assume that the execution context stack is an array, so that it is easier to understand. When the code is not executed, the stack is empty

 ECStack = [];
Copy the code

2. When the script tag is inserted, the global execution context will be pushed into the stack

 ECStack = [
    globalContext
 ]
Copy the code

3. Moving on to our code, JS encounters the following code

       function EC() {let b = 1 
              console.log(b)
        }
Copy the code

When the compiler encounters a function, it generates an execution context for the function and pushes it onto the stack. We use ECContext to represent the execution context of the function

ECStack = [ECContext, globalContext] ECStack = [ECContext, globalContext]Copy the code

4. This is the time to execute the EC function. The EC execution context does some internal processing, which we will cover later

// When the EC function completes, the ECContext at the top of the stack pops up, and the globalContext at the bottom of the stack goes to the top of the stack.Copy the code

When the JS is destroyed, the globalContext pops out of the stack, the ECStack is reclaimed, and a complete JS is finished

You might wonder, what exactly does the frequently mentioned execution context do?

Execution Context

What is an execution context? View definition

When a piece of executable code is executed, it creates an execution context, which can be understood as the execution environment of the current code

So what is executable code?

  • Global code (global environment) : The default environment in which your code is first executed, such as loading an external JS file or code inside a local tag. Global code does not include any code inside a function. This is the default environment in which the code is run, and is the first environment the engine enters once the code is loaded.
  • Function code (function environment) : When a function is called to execute, the execution environment in the current function is entered
  • Eval (not recommended, can be ignored)

Execution Context

There are three important properties for each execution context, which are

  • Variable Object (VO)
  • Scope chain
  • This point

Execute context Variable object (VO)

VO Variable object VO Variable object VO

Execution context is created when first creating variable object vo, vo save the physical parameter in the function and the arguments and local variables, such as this pointer function performs the function of internal data (not execute code at this time), in the global execution context object is called a variable vo, in the function execution context is called active objects AO, In fact, the two are the same, and the details are as follows

1. Function parameters and arguments (if function context)

  • The property of a variable object consisting of a name and corresponding value is created
  • When no argument is passed in, the parameter is undefined

2. Function Max ()

  • Create a variable object from the name and content of the function

3. Declaration of variables, such as var a

  • Create a variable object by name and undefined

We also use code that analyzes the execution of the context stack to transform the chestnuts


        function EC(a) {
            var b = 1
            console.log(b)
            console.log(a)
            var c = function() {}function c(){}
        }
        EC(2)
Copy the code

At this point the AO is, the function has not yet been executed

AO = {arguments: {0:2, length: 1}, a:2, B :undefined, C :undefined, D :reference tofunction d(){}
}
Copy the code

When the EC code is executed, the AO will be assigned in sequence, and when the execution is complete, the AO will be assigned in sequence

AO = {arguments: {0:2, length: 1}, a:2 b:1, c:reference to FunctionExpression"c"
    d:reference to function c(){}
} 
Copy the code

This completes the creation of the variable object