One article explains in detail the execution context and execution stack in JavaScript (a combination of pictures and text)

It is necessary for us front-end developers to understand the internal execution mechanism of the JS program. One of the key concepts is Js execution context and execution stack. Execution context is the lower-level knowledge of the JS language. Learning and mastering it will help us grasp the essence of the JS language more deeply, and it will also help us understand scope, closure, and variables. Improve related knowledge.

1 What is execution context

Before code execution, the browser's Js engine will first create a code execution environment to handle this JsThe conversion and execution of code, the execution environment of the code is called the execution context.

An execution context is an abstract concept that encompasses the code that is currently running and everything that helps it execute .

2 Classification

Execution context is mainly divided into three categories:

• Global execution context - the environment where the global code is located,Code not inside the function is executed globally.
• Function execution context - the context created when a function is called.
• EvalExecution context - the environment created when running the code in the Eval function, Eval is very difficult in our daily development due to performance issues It is rarely used, so we will not discuss it here.

Next we focus on global context and function context.

2.1 Global execution context

When our JS file is run, the first thing created is the global execution context .

When there is not a line of code in our file, the global execution context is relatively clean, with only two things.

• Global object (Window in the browser, Global in the Node environment)
• thisVariable (pointing to the global object)

If we write something in the file at this time, for example, I write the following code:

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}

The global execution context is It will immediately look like this:

As you can see in the picture above, we have clearly assigned values ​​to name and age, what? Will undefined still be displayed? This is because the execution context is divided into two parts, the creation phase and the execution phase.

• Creation phase - the initialization state of the execution context, do some preparations
• Execution phase - the code is executed line by line

The above is the creation phase Global context overview, during the creation phase JS engine will do the following things:

• Use window as the global execution context object
• Createthis,thispoints to window
• Arrange memory space for variables and functions
• Variable assignment undefined, the function declaration is put into the memory
• into the scope chain

Then the execution phase of the global execution context is entered, which is the assignment phase, as shown below :

It should be noted that the execution context execution phase is executed line by line, as shown in the following figure:

##2.2 Function Execution Context

Understand the complete global execution context, and the function execution context also. We only need to pay attention to the difference between it and the global context. Between the two The difference between them is mainly reflected in the following three aspects:

Creation timing: the global execution context is created before executing the JS file, while the function execution context is
• when the function is called create.
Creation frequency: The global context is created once before the code starts to be executed, while the function execution context is determined by the number of
• calls to the function in the script and can be created countless times. Creation content: The global execution context uses
window
• as the global object, but the function execution context uses the parameter object arguments; created this will not point to the global object, but depends on how the function is called.
We use the following example to see the performance of different stages of the function context:

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}

// 调用该函数
showName()

When we call the

showName

function, we will enter the function execution context In the Creation phase, the scenario of the function execution context is as follows:

Then it will enter the execution phase, and the code in the function will be executed line by line at this stage. , in this example, because there is no modification of variables, the content of the function context remains unchanged. After execution is completed, the life cycle of the function context ends.

当我们调用showName函数时，在浏览器中运行状况：

3 执行栈

我们看到当函数执行完后，其对应的执行上下文也随之消失了。这个消失的过程，我们叫它出栈——在JS代码执行过程中，JS引擎会为我们创建“执行上下文栈”。

在全局代码执行前，JS引擎为了管理执行上下文，确保程序的执行顺序。JS引擎会创建一个栈来管理所有的所有的执行上下文对象。

因为函数上下文可能会存在多个，我们不可能保留所有的上下文。当一个函数执行完毕，其对应的上下文必须让出之前所占用的资源。因此上下文的建立和销毁，就对应了一个” 入栈 “和” 出栈 “的操作。

当我们调用一个函数的时候，就会把它的上下文推入调用栈里，执行完毕后出栈，随后再为新的函数进行入栈操作。

我们通过一个例子来看一下这个过程：

function testA(){
  console.log('执行第一个测试函数的逻辑');
  testB();
  console.log('再次执行第一个测试函数的逻辑');
}

function testB(){
  console.log('执行第二个测试函数的逻辑');
}

testA()

1、执行之前，全局上下文创建：

2、testA调用，testA对应函数上下文创建：

3、testB调用，testB对应函数上下文创建：

4、testB执行完毕，对应上下文出栈，剩下testA和全局执行上下文：

5、testA执行完毕，对应执行上下文出栈，此时只剩下全局上下文：

在这整个过程里，调用栈的变化示意如下：

4 总结

• 执行上下文是什么：代码执行前，Js引擎会创建代码的执行环境，代码的执行环境称作执行上下文，包含当前正在运行的代码以及帮助其执行的所有内容。

• 全局执行上下文：（1）将window作为全局执行上下文对象（2）创建this，this 指向window（3）给变量和函数安排内存空间（4）变量赋值undefined，函数声明放入内存（5）放入作用域链

• 全局与函数执行上下文不同：（1）全局：在文件执行前创建；函数：在函数调用时创建（2）全局：只创建一次；函数：调用几次创建几次（3）将window作为全局对象；函数：创建参数对象arguments，this指向调用者

• 执行栈：管理所有的执行上下文对象

【相关推荐：javascript视频教程、编程基础视频】

The above is the detailed content of One article explains in detail the execution context and execution stack in JavaScript (a combination of pictures and text). For more information, please follow other related articles on the PHP Chinese website!