The execution context of JavaScript

Understand the execution Context

Only by understanding the execution context and the call stack can we better understand JavaScript itself and understand complex concepts such as variable promotion, scope, and closures. Although you will not be asked directly about the concept of execution context, you will be asked about variables promotion and closures.

Reference shows that ES3 and ES6 have different descriptions of execution contexts.

ES3 introduces the execution context from the perspective of Variable Object, Scope chain, and this.

ES6 introduces the execution context from the perspective of lexical context, variable context, and this point.

This article focuses on the execution context in ES6. If you want to understand the introduction of ES3 execution context, you can refer to JavaScript in-depth execution context.

What is an execution context

An Execution context is the Execution context in which JavaScript executes a piece of code. It determines what is used during the Execution of the code, such as this, variables, objects and functions.

The execution context consists of the lexical environment component, the variable environment component, and the this binding. As shown in the following table:

Lexical environment component: Variables created by let const with try-catch exist here.

Variable environment components: Objects declared by var or function{} exist here.

Consider an example of an execution context:

var a = 1;
let b = 2;
function printName (name) {
  console.log(name)
}
Copy the code

When this code is run, an execution context like the one above is generated, where a is declared by var and is placed in a variable environment.

B is declared by let and is put into lexical context; PrintName is a function declaration, so it goes into the variable environment; Here you can see that the variables that cause the variable promotion have been put into the variable environment.

Note that both the lexical environment component and the variable environment component specify a lexical environment object.

In JavaScript, each running function, block of code, and script as a whole has an internal (hidden) correlation object called the Lexical Environment.

The lexical environment object consists of two parts:

1. Environmental records(Environment Record) : An object that stores all local variables as its properties (including some other information, such as the value of this).
2. rightExternal lexical environmentIs associated with external code.

When is the execution context created

1. Global execution context
   • When JavaScript executes global code, the global code is compiled and the global execution context is created, and there is only one global execution context for the lifetime of the page.
2. Function execution context
   • When a function is called, the code inside the function is compiled and the function execution context is created. Generally, the function execution context is destroyed when the function is finished.
3. The eval function
   • When the eval function is used, the eval code is also compiled and the execution context is created.

Execution context is generated only when the code is running.

What is an execution context stack

First, understand what a stack is. A stack is a lifO data structure.

When global code is run, a global execution context is generated. When a function is called, a function execution context is created, so how does the JavaScript engine manage so many execution contexts? Yes, through a data structure called a stack, commonly known as a call stack.

When JavaScript runs a piece of code, the global execution context is pushed to the bottom of the stack, when a function is called, the created execution context is pushed to the call stack, and when the function completes, the execution context is ejected from the call stack.