Comment fonctionne JavaScript : comprendre le contexte d'exécution (simplifié pour les débutants)

JavaScript est l'un des langages de programmation les plus populaires au monde. Mais comment ça marche sous le capot ? Décomposons-le étape par étape, en utilisant des concepts simples et un pseudocode, afin que tout débutant puisse comprendre.

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui s'exécute dans un navigateur (comme Chrome, Firefox ou Safari) ou sur un serveur (à l'aide d'outils comme Node.js). Il est utilisé pour rendre les sites Web interactifs. Lorsque vous voyez des animations, des boutons faisant des choses sympas ou des jeux dans un navigateur, JavaScript fait la magie.

Pour comprendre le fonctionnement de JavaScript, nous devons comprendre deux choses :

1. Contexte d'exécution
2. Pile d'appels

Qu'est-ce qu'un contexte d'exécution ?

Un contexte d'exécution est comme une boîte dans laquelle JavaScript conserve tout ce dont il a besoin pour exécuter votre code. Cela comprend :

1. Variables (données que vous stockez, comme x = 5)
2. Fonctions (morceaux de code qui font quelque chose, comme showMessage())
3. Code à exécuter (les instructions réelles que vous écrivez)

Il existe deux principaux types de contextes d'exécution :

1. Contexte d'exécution global (GEC) : Il s'agit de la zone par défaut dans laquelle JavaScript commence à exécuter votre code. C'est comme la scène principale.
2. Contexte d'exécution de fonction (FEC) : Il s'agit d'une nouvelle boîte créée chaque fois qu'une fonction est appelée. Cela ne fonctionne que pour cette fonction.

Exemple étape par étape

Imaginez que vous ayez écrit ce simple pseudocode :

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

Voici ce que JavaScript fait étape par étape :

1. Créer un contexte d'exécution global

Lorsque le programme démarre, JavaScript crée automatiquement un Contexte d'exécution global (GEC).

• Mémoire (environnement variable) :

  • nom = non défini (espace réservé pour l'instant)
  • greet = définition de la fonction (stocke le code pour greet())

• Phase d'exécution du code :

  • Il exécute le code global ligne par ligne :
  • var nom = "Alex"; → Met à jour la mémoire : nom = "Alex"
  • Rencontres greet(); → Appelle la fonction d'accueil.

2. Créer un contexte d'exécution de fonction

Lorsque greet() est appelé, JavaScript crée un nouveau Contexte d'exécution de fonction (FEC) spécifiquement pour greet.

• Mémoire (environnement variable) :

  • message = non défini (espace réservé pour la variable à l'intérieur de greet)

• Phase d'exécution du code :

  • Exécute la fonction d'accueil :
  • var message = "Bonjour, " nom ; → Combine "Bonjour" avec le nom ("Alex"), donc message = "Bonjour Alex".
  • message de retour ; → Renvoie « Bonjour, Alex ».

3. Nettoyer et retourner

Une fois la fonction d'accueil terminée, son Contexte d'exécution de fonction est supprimé (supprimé). Le programme revient au Contexte Global d'Exécution.

Qu'arrive-t-il aux contextes d'exécution ?

JavaScript garde une trace de tous ces contextes d'exécution à l'aide d'une pile d'appels.

Qu'est-ce qu'une pile d'appels ?

La pile d'appels est comme une pile d'assiettes :

1. Le Contexte Global d'Exécution se trouve en bas (la première planche).
2. Chaque fois qu'une fonction est appelée, un Contexte d'exécution de fonction est ajouté en haut (une nouvelle plaque).
3. Lorsque la fonction se termine, son contexte est supprimé (la plaque est retirée).

Visualisation avec pseudocode

Voici comment JavaScript traite notre code :

1. Code global initial (Créer GEC) :
   

   // Global Code
   var name = "Alex";
   function greet() {
       var message = "Hello, " + name;
       return message;
   }
   greet();
   

   Copier après la connexion

   Copier après la connexion

2. Mises à jour globales de l'exécution (code d'exécution) :
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

   Copier après la connexion

3. Appeler greet() (Créer FEC) :
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

   Copier après la connexion

4. Exécutez greet() et Return :
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

   Copier après la connexion

5. Terminer l'exécution :
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

   Copier après la connexion

Choses clés à retenir

1. Les contextes d'exécution sont comme des conteneurs où JavaScript exécute du code. Chaque programme commence par un Contexte d'exécution global, et chaque fonction obtient son propre Contexte d'exécution de fonction.
2. La pile d'appels garde une trace de ce qui est en cours. La dernière chose ajoutée est la première chose supprimée (LIFO : Last In, First Out).
3. JavaScript nettoie lorsqu'une fonction est terminée. C'est pourquoi la mémoire d'une fonction ne reste pas éternellement.

Pourquoi est-ce important ?

Comprendre les contextes d'exécution vous aide à écrire de meilleurs programmes :

• Vous saurez pourquoi les variables sont disponibles à certains endroits et pas à d'autres (portée).
• Vous comprendrez les erreurs telles que les variables « non définies ».
• Vous verrez comment les fonctions interagissent et pourquoi elles renvoient des valeurs.

Défiez-vous

Essayez d'exécuter ce pseudocode dans votre esprit :

Call Stack:
  Empty (Program Ends)

Demandez-vous :

1. Qu’y a-t-il dans le Contexte d’exécution global ?
2. Que se passe-t-il lorsque multiplier() est appelé ?
3. Quelle est la valeur finale du résultat ?

En maîtrisant les contextes d'exécution, vous disposerez d'une base solide pour résoudre même les problèmes JavaScript les plus délicats !

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!