Contexte d'exécution JavaScript – Comment le code JS s'exécute dans les coulisses

Avant de comprendre ce qu'est le contexte d'exécution JavaScript, nous devons savoir comment et dans quels environnements nous pouvons exécuter du code JavaScript.

Tout d'abord, nous pouvons exécuter JavaScript dans deux environnements :

1. Par le navigateur
2. Grâce à Node.js

Comment le code JavaScript s’exécute-t-il sur notre ordinateur ?

Lorsque nous écrivons du code JavaScript sur notre ordinateur et que nous essayons ensuite de l'exécuter, le code va d'abord soit dans le navigateur, soit dans Node.js.

Cependant, le code JavaScript que nous écrivons n'est pas directement compris par le navigateur ou Node.js. À ce stade, les deux envoient le code au moteur JavaScript intégré. Il existe différents types de moteurs, par exemple :

1. Moteur V8 dans Google Chrome,
2. SpiderMonkey dans Mozilla Firefox,
3. Moteur V8 dans Node.js, etc.

Ensuite, le moteur JavaScript compile le code JavaScript en code machine. Ce code machine est ensuite envoyé à l'ordinateur, qui l'exécute, et nous voyons le résultat affiché.

En tant que programmeurs, nous devons bien comprendre cette étape intermédiaire, c'est-à-dire comment le moteur JavaScript compile le code JavaScript en code machine.

Nous devons maintenant comprendre comment fonctionne le moteur JavaScript. Le moteur JavaScript fonctionne de deux manières pour convertir le code en code machine. Le premier est l’interprétation et le second est la compilation. Alors, que sont l'interprétation et la compilation ?

Qu’est-ce que l’interprétation et comment fonctionne-t-elle ?

L'interprétation est le processus de lecture de tout le code source écrit dans un langage de haut niveau ligne par ligne et de conversion de chaque ligne en code machine immédiatement après sa lecture. S'il y a une erreur lors de la lecture d'une ligne de code, le processus s'arrête là, ce qui permet au programmeur d'identifier facilement l'erreur. Cela rend le débogage simple. Cependant, comme ce processus lit le code ligne par ligne, il est comparativement plus lent.

Qu’est-ce que la compilation et comment ça marche ?

La compilation est le processus de conversion simultanée de tout le code source écrit dans un langage de haut niveau en code machine. Dans ce cas, même s'il y a des erreurs dans le code, il sera toujours compilé et n'affichera les erreurs qu'au moment de l'exécution. En conséquence, il devient plus difficile pour le programmeur d’identifier les erreurs, ce qui rend le débogage plus difficile. Cependant, comme l’intégralité du code source est convertie en code machine en une seule fois, ce processus est comparativement plus rapide. Alors maintenant, la question se pose : JavaScript est-il un langage compilé ou interprété ?

JavaScript est-il un langage compilé ou interprété ?

Au départ, JavaScript était avant tout considéré comme un langage interprété. Cependant, comme ce processus était assez lent, les moteurs JavaScript modernes ont commencé à utiliser une nouvelle technique combinant à la fois interprétation et compilation, connue sous le nom de compilation juste à temps (JIT). Ce processus combine interprétation et compilation pour convertir le code en code machine. En conséquence, il est beaucoup plus rapide et plus facile de déboguer par rapport aux anciennes méthodes.

Pour comprendre le fonctionnement de la compilation Just-In-Time (JIT) de JavaScript, nous devons comprendre le contexte d'exécution de JavaScript. Essayons maintenant de comprendre le contexte d'exécution de JavaScript.

Contexte d'exécution JavaScript

Tout d'abord, jetez un œil à l'exemple de code suivant.

Exemple de code

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

Sortir

1
undefined
7

Lorsque nous avons exécuté le code, nous avons essayé d'imprimer la variable b avant qu'elle ne soit déclarée dans la fonction two(), et la sortie n'était pas définie. Cependant, aucune erreur ne s'est produite. La question se pose : comment la variable b avait-elle la valeur indéfinie ? La réponse réside dans le contexte d'exécution JavaScript. Nous allons maintenant explorer le contexte d'exécution JavaScript plus en détail.

Il existe deux types de contexte d'exécution en JavaScript :

1. Contexte d'exécution global
2. Contexte d'exécution de la fonction

Chaque contexte d'exécution passe par deux phases : la phase de création et la phase d'exécution.

Contexte d'exécution global

Lorsque nous exécutons du code JavaScript, la première chose qui se produit est le contexte d'exécution global. Ce contexte passe d'abord par sa Phase de Création, où plusieurs choses se produisent :

Phase de création

1. Un Objet Global est créé.
2. Un cet objet est créé et se voit attribuer la valeur de l'objet global.
3. Un objet variable est créé, où toutes les fonctions et variables sont déclarées. Les variables se voient attribuer une valeur indéfinie et les fonctions se voient attribuer des références à leurs fonctions respectives.

Une fois la phase de création terminée, le contexte d'exécution global passe à la phase suivante : la phase d'exécution, où d'autres étapes se produisent.

Phase d'exécution

1. Les variables qui ont été déclarées lors de la phase de création et initialisées avec undefined se voient désormais attribuer leurs valeurs respectives.
2. Les fonctions déclarées lors de la phase de création, qui étaient stockées comme références, sont maintenant appelées et exécutées.

Contexte d'exécution de fonction

Lorsque les fonctions référencées lors de la phase d'exécution du contexte d'exécution global sont appelées, chaque fonction crée son propre contexte d'exécution de fonction. Tout comme le Contexte Global d'Exécution, le Contexte d'Exécution de Fonction passe également par une Phase de Création, où se déroulent plusieurs étapes :

Phase de création

1. Un objet paramètre est créé pour la fonction.
2. Un cet objet est créé et se voit attribuer la valeur de l'objet global.
3. Un objet variable est créé, où toutes les fonctions et variables sont déclarées. Les variables se voient attribuer une valeur indéfinie et les fonctions se voient attribuer des références à leurs fonctions respectives.

Une fois la phase de création terminée, le contexte d'exécution de la fonction passe à la phase d'exécution, où d'autres étapes se produisent.

Phase d'exécution

1. Les variables déclarées lors de la phase de création, qui ont été initialisées avec undefined, se voient désormais attribuer leurs valeurs respectives.
2. Les fonctions déclarées lors de la phase de création sont maintenant appelées et exécutées.

Contexte d'exécution de fonction dans les fonctions imbriquées

Lorsque des fonctions sont appelées au sein d'autres fonctions, un nouveau contexte d'exécution de fonction est créé pour chacune de ces fonctions. Chaque contexte d'exécution de fonction passe ensuite par la phase de création et la phase d'exécution. Ce processus se poursuit pour chaque fonction appelée à l'intérieur d'une autre fonction, et chaque fonction passera par ces phases séparément.

Regardons le schéma ci-dessous.

Nous avons vu que le contexte d'exécution global et le contexte d'exécution de fonction passent par certaines étapes. La seule différence est que, dans le contexte d'exécution global, la première étape consiste à créer l'objet global, alors que, dans le contexte d'exécution de fonction, la première étape consiste à créer un objet paramètre pour la fonction.

Maintenant, la question se pose : comment JavaScript gère-t-il ces Contextes d'Exécution lorsqu'ils sont créés à la fois pour le contexte global et pour chaque fonction ?

Gestion des contextes d'exécution avec la pile d'exécution

Pour gérer ces contextes, JavaScript utilise une structure de données appelée Execution Stack. La pile d'exécution stocke les contextes à la manière d'une pile : d'abord, le contexte d'exécution global, suivi de chaque contexte d'exécution de fonction. Lorsque tous les contextes d'exécution sont stockés dans la pile, JavaScript les traite un par un, en commençant par le haut de la pile.

Portée avec let et const

Il est important de noter que lorsque nous déclarons des variables avec let ou const dans une portée globale ou de fonction, ces variables ne sont pas stockées dans l'objet variable pendant la phase de création, et elles ne sont pas initialisées avec undefined. Au lieu de cela, ces variables sont directement déclarées et leurs valeurs affectées lors de la phase d'exécution.

Considérez l'exemple de code suivant :

Exemple de code

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

Si nous exécutons ce code, nous rencontrerons une ReferenceError. En effet, nous essayons d'imprimer la valeur de la variable b avant de la déclarer, et puisque b est déclaré en utilisant const, elle se comporte différemment des variables normales. Les variables déclarées avec const ou let ne sont pas stockées dans l'objet variable pendant la phase de création, c'est pourquoi nous obtenons une erreur lorsque nous essayons d'y accéder avant qu'une valeur ne leur soit attribuée.

Conclusion

J'espère que cette explication du fonctionnement de JavaScript et de ce qui se passe pendant ses phases de contexte d'exécution vous a permis de mieux comprendre. Dans la prochaine leçon, nous explorerons un autre sujet JavaScript.

Vous pouvez me contacter sur GitHub et Linkedin.

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!