Un article explique en détail le contexte d'exécution et la pile d'exécution en JavaScript (une combinaison d'images et de texte)

Il est nécessaire pour nous, développeurs front-end, de comprendre le mécanisme d'exécution interne du programme JS. L'un des concepts clés est le contexte d'exécution et la pile d'exécution de Js<.>. Le contexte d'exécution est la connaissance de niveau inférieur du langage <code>JS. L'apprendre et le maîtriser nous aidera à saisir plus profondément l'essence du langage JS, et cela nous aidera également. comprendre la portée et la clôture, la promotion variable et d'autres connaissances connexes. JS程序内部执行机制是必要的，其中一个关键概念就是Js的执行上下文和执行栈。执行上下文是JS语言较为底层的知识，学习掌握有助于我们更深入的把握JS这门语言的本质，也有助于理解作用域、闭包、变量提升等相关知识。

1 何为执行上下文

代码执行前，浏览器的Js引擎先会创建代码执行的环境来处理此Js代码的转换和执行，代码的执行环境称为执行上下文。

执行上下文是一个抽象概念，包含当前正在运行的代码以及帮助其执行的所有内容。

2 分类

执行上下文主要分为三类：

• 全局执行上下文 —— 全局代码所处的环境，不在函数内部代码都在全局执行。
• 函数执行上下文 —— 在函数调用时创建的上下文。
• Eval执行上下文 —— 运行在Eval函数中代码时创建的环境，Eval由于性能问题在我们平时开发中很少用到，所有这里我们不在讨论。

接下来我们重点来讲全局上下文和函数上下文。

2.1 全局执行上下文

当我们的JS文件跑起来之后，首先创建的就是全局执行上下文。

当我们的文件里没有一行代码时，全局执行上下文中比较干净，只有两个东西。

• 全局对象（浏览器里是Window，Node环境下是Global）
• this变量（指向的还是全局对象）

这时候如果我们在文件里写点东西，比如我写如下代码：

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

全局执行上下文就会立刻变成这个样子：

上图可以看到，我们明明给name和age赋值了，咋还会显示undefined呢？这是因为执行上下文分为两部分，创建阶段和执行阶段。

• 创建阶段 —— 执行上下文的初始化状态，做一些准备工作
• 执行阶段 —— 代码一行一行执行

以上就是创建阶段的全局上下文概况，在创建阶段JS引擎将会做以下几件事：

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

接下来才会进入了全局执行上下文的执行阶段，也就是赋值阶段，如下图：

需要注意的是执行上下文执行阶段是一行一行执行的，如下图所示：

2.2 函数执行上下文

理解完全局执行上下文，函数执行上下文也我们只需要关注它与全局上下文之间的不同即可，两者之间不同主要表现在以下三个方面：

• 创建时机：全局执行上下文在执行JS文件之前就被创建，而函数执行上下文则是在函数调用时创建。
• 创建频率：全局上下文在代码刚开始被执行前创建一次，而函数执行上下文由脚本里函数调用次数决定，可以创建无数次。
• 创建内容：全局执行上下文将window作为全局对象，而是函数执行上下文则是创建参数对象arguments;创建的this也不会指向全局对象，而是取决于函数是如何调用的。

我们通过下面这个例子来看函数上下文不同阶段的表现：

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

// 调用该函数
showName()

当我们调用showName

1 Qu'est-ce que le contexte d'exécution

Avant l'exécution du code, le moteur Js du navigateur créera d'abord un environnement d'exécution de code pour traiter ce Js. la conversion et l'exécution du code, ainsi que l'environnement d'exécution du code sont appelés contexte d'exécution.

Le contexte d'exécution est une abstraction qui englobe le code

qui est actuellement

en cours d'exécution et tout ce qui

contribue à son exécution🎜. 🎜

🎜2 Classification🎜

🎜Le contexte d'exécution est principalement divisé en trois catégories : 🎜

• Contexte d'exécution global - l'environnement dans lequel se trouve le code global, 🎜aucun code à l'intérieur de la fonction n'est exécuté à l'échelle mondiale🎜 .
• Contexte d'exécution de fonction : le contexte créé lorsqu'une fonction est appelée. Contexte d'exécution
• Eval - l'environnement créé lors de l'exécution du code dans la fonction Eval Eval n'est pas utilisé dans notre. code en raison de problèmes de performances. Il est rarement utilisé dans le développement quotidien, nous n'en discuterons donc pas ici.

🎜Ensuite, nous nous concentrons sur le contexte global et le contexte fonctionnel. 🎜🎜🎜2.1 Contexte d'exécution global🎜🎜🎜Lorsque notre fichier JS est exécuté, la première chose créée est le contexte d'exécution global . 🎜🎜Quand il n'y a pas une ligne de code dans notre fichier, le contexte global d'exécution est relativement propre, avec seulement deux choses. 🎜

• Objet global (Window dans le navigateur, Global dans l'environnement Node)
• cette variable (pointant vers l'objet global)

🎜Si on écrit quelque chose dans le fichier à ce moment par exemple, j'écris le code suivant :🎜

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

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

testA()

🎜L'exécution globale contexte Cela ressemblera immédiatement à ceci : 🎜🎜🎜🎜Comme vous pouvez le voir sur l'image ci-dessus, nous avons clairement attribué des valeurs à name et age, mais pourquoi indéfini toujours affiché ? En effet, le contexte d'exécution est divisé en deux parties, la phase de création et la phase d'exécution. 🎜

• Phase de création - l'état d'initialisation du contexte d'exécution, faire quelques préparatifs
• Phase d'exécution - le code est exécuté ligne par ligne

🎜Ce qui précède est la phase de création Aperçu du contexte global, pendant la phase de création, le moteur JS fera les choses suivantes : 🎜

• Utiliser window comme objet de contexte d'exécution global
Créez this, this pointe vers fenêtre
• Organisez l'espace mémoire pour les variables et les fonctions
• Affectation des variables non défini, la déclaration de fonction est placée en mémoire
• Mise en chaîne de portée

🎜Puis la phase d'exécution du global le contexte d'exécution sera saisi. C'est l'étape d'affectation, comme indiqué ci-dessous : 🎜🎜🎜🎜Il est à noter que la phase d'exécution du contexte d'exécution est exécutée ligne par ligne, comme le montre la figure suivante : 🎜🎜🎜🎜🎜2.2 Contexte d'exécution de la fonction🎜🎜🎜 Pour comprendre le contexte d'exécution global complet et le contexte d'exécution de la fonction, il suffit de prêter attention à la différence entre celui-ci et le contexte global. La différence entre les deux se reflète principalement dans le. suivant trois aspects : 🎜

• Synchronisation de création : exécution globale Le contexte est créé avant l'exécution du fichier JS, tandis que le contexte d'exécution de la fonction est créé lorsque la fonction est appelée.
• Fréquence de création : le contexte global est créé une fois avant le début de l'exécution du code, tandis que le contexte d'exécution de la fonction est déterminé par le nombre d'appels à la fonction dans le script et peut être créé un nombre incalculable de fois.
• Créer du contenu : le contexte d'exécution global utilise window comme objet global, mais le contexte d'exécution de fonction utilise l'objet paramètre arguments créé  ; this ne pointe pas non plus vers l'objet global, mais dépend de la manière dont la fonction est appelée.

🎜Nous utilisons l'exemple suivant pour voir les performances du contexte de fonction à différentes étapes : 🎜rrreee🎜Lorsque nous appellerons la fonction showName, nous entrerons dans la 🎜création de le contexte d'exécution de la fonction À l'étape 🎜, la scène du contexte d'exécution de la fonction est la suivante : 🎜🎜🎜🎜🎜 Ensuite, il entrera dans l'étape d'exécution. À ce stade, le code de la fonction sera exécuté ligne par ligne. Par exemple, comme aucune modification des variables n'est impliquée, le contexte de fonction Le contenu reste inchangé et une fois l'exécution terminée, le cycle de vie du contexte de fonction se termine. 🎜

当我们调用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视频教程、编程基础视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!