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 theJSprogram. One of the key concepts isJsexecution context and execution stack. Execution context is the lower-level knowledge of theJSlanguage. Learning and mastering it will help us grasp the essence of theJSlanguage 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'sJsengine will first create a code execution environment to handle thisJsThe 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 codethat is currentlyrunning andeverything 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 theEvalfunction,Evalis 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 ourJSfile 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 (Windowin the browser,Globalin theNodeenvironment)
• 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 tonameandage, what? Willundefinedstill 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 phaseJSengine will do the following things:

• Usewindowas the global execution context object
• Createthis,thispoints towindow
• Arrange memory space for variables and functions
• Variable assignmentundefined, 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

Creation timing: the global execution context is created before executing the JS file, while the function execution context is
• when the function is calledcreate.
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 objectarguments; createdthiswill 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

function, we will enter the function execution context In theCreation 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!