Execution context and execution stack

introduction

It is necessary for us front-end developers to understand the internal execution mechanism of JS programs. One of the key concepts is the execution context and execution stack of Js.
The execution context is the lower-level knowledge of the JS language. Learning and mastering it will help us better grasp the essence of the JS language, and also help us understand related knowledge such as scope, closure, and variable promotion.

What is an execution context?

Before the code is executed, the Js engine of the browser will first create a code execution environment to handle the conversion and execution of the Js code. The execution environment of the code is called the execution context.
Execution context is an abstract concept that includes information such as the currently running code and the variables, function declarations, parameters (arguments), scope chain, and this in the current execution environment.

In one sentence:执行上下文就是javascript代码被解析和执行时所在环境的抽象概念。

Execution context life cycle

(1) Creation phase
Generate variable objects, establish scope chains, and determine the direction of this

(2) Execution stage
Variable assignment, function reference, execution of other codes

variable object

The variable object is the data scope related to the execution context, which stores the variables and function declarations defined in the context. The variable object is an abstract concept. In the global execution context, the variable object is the global object. In the top-level js code, this points to the global object, and global variables will be queried as attributes of the object. In the browser, window is the global object

type of execution context

In js, the execution context is divided into the following three types:

Global execution context: There is only one, that is, the browser object (that is, the window object), and this points to this global object.
Function execution context: There are countless, which are created only when the function is called, and a new execution context is created every time the function is called.
Eval function execution context: The eval function of js executes its internal code to create its own execution context, which is rarely used and not recommended.

For each execution context, there are three important properties:变量对象、作用域链(Scope chain)、this

Execution Context Characteristics

Single-threaded, only runs on the main thread;
Synchronous execution, sequential execution from top to bottom;
There is only one global context, which is the window object;
There are no restrictions on the function execution context;
Every time a function is called, a new execution context is created.

execution stack

It is a first-in, last-out data structure used to store all the execution contexts in which the code runs

When the JS engine encounters a js script for the first time, it will create a global execution context and push it into the current execution stack
Whenever the JS engine encounters a function call, it creates a new execution context for that function and pushes it onto the top of the stack
When the function execution ends, the execution context is popped from the stack, and the flow of control reaches the next context in the current stack
Once all code is executed, the JS engine removes the global execution context from the current stack

Execution stack example

var a = 1; // 1. 全局上下文环境

function bar (x) {

console.log('bar')

var b = 2;

fn(x + b); // 3. fn上下文环境

}

function fn (c) {

console.log(c);

}

bar(3); // 2. bar上下文环境

Front-end JS Basics Part 1: Execution Context and Execution Stack