Comprendre le contexte d'exécution en JavaScript

L'un des concepts les plus importants de JavaScript est le contexte d'exécution. Définissons les contextes d'exécution global, fonction et eval et voyons quelques exemples.

Les applications modernes sont généralement écrites par des morceaux de code uniques. Il existe une variété de morceaux de code à l'intérieur d'une application qui jouent des rôles importants. Les fonctions font généralement quelque chose en fonction d'une entrée et d'une sortie, les variables contiennent des données, etc.

La gestion du code par morceaux réduit la complexité de notre code et augmente l'évolutivité. Un énorme bloc de code n'est pas évolutif à long terme. À un moment donné, cela introduira de la complexité et créera des bogues inattendus. La façon dont nous composons notre code peut énormément déterminer si notre application réussira ou non.

Les applications modernes font généralement un usage intensif de JavaScript. JavaScript est utilisé partout de nos jours, de la création de superbes composants d'interface utilisateur aux API et services Web évolutifs.

La compréhension des concepts de base de JavaScript peut amener un développeur à un tout autre niveau. L'un des concepts les plus importants de JavaScript est le contexte d'exécution. Il est présent partout – chaque fois que vous commencez à créer quelque chose en utilisant JavaScript, vous l'utiliserez sous le capot, que vous le sachiez ou non. Chaque fois qu'une nouvelle application démarre, chaque fois qu'une fonction est exécutée, le contexte d'exécution sera là. Alors, qu'est-ce que le contexte d'exécution ?

Contexte d'exécution

Le contexte d'exécution permet au moteur JavaScript de gérer la complexité de l'interprétation et de l'exécution de notre code.

Le contexte d'exécution est un concept abstrait qui contient des informations sur l'environnement. où le code actuel est exécuté.

Nous avons trois types différents de contextes d'exécution JavaScript :

1. Contexte d'exécution global – Ce contexte d'exécution est créé par défaut par le moteur JavaScript.
2. Fonction contexte d'exécution – Ce contexte d'exécution est créé chaque fois qu'une fonction est exécutée.
3. Contexte d'exécution eval – Ce contexte d'exécution est créé à l'intérieur d'une fonction eval.

Nous allons utiliser un outil créé par ui.dev appelé JavaScript Visualizer. Cet outil a été créé pour visualiser facilement le fonctionnement du contexte d'exécution, du levage, des fermetures et des portées en JavaScript. Nous allons utiliser cet outil pour nous aider à comprendre le contexte d'exécution JavaScript et son fonctionnement.

Contexte global d'exécution

Le premier contexte d'exécution est créé lorsque les moteurs JavaScript exécutent votre code. Le moteur JavaScript crée un nouveau contexte d'exécution avant l'exécution de tout code, et ce nouveau contexte d'exécution est appelé contexte d'exécution global.

Le contexte d'exécution global est le contexte d'exécution par défaut créé par le moteur JavaScript. Tout le code global qui ne se trouve pas à l'intérieur d'une fonction ou d'un objet sera exécuté dans le contexte d'exécution global.

Accédez à notre visualiseur JavaScript et cliquez sur le bouton « Exécuter » sans écrire de code. Vous pouvez voir que notre contexte d'exécution global a été créé par défaut.

Chaque contexte d'exécution (pas seulement les contextes globaux) consistera en deux éléments :

1. Un objet global –  Fournit des variables et des fonctions disponibles n'importe où dans l'environnement actuel. Dans le navigateur, l'objet global est nommé window ; lors de l'utilisation de Node.js, l'objet global est nommé global.
2. A this object –  Le mot clé this pointe vers l'objet actuel du contexte d'exécution auquel appartient le code .

Le moteur JavaScript créera toujours un contexte d'exécution global même si nous n'avons aucun code écrit. JavaScript est un langage de programmation à thread unique, il n'est donc pas possible d'avoir plus d'un contexte d'exécution global pour une exécution JavaScript.

À l'intérieur de notre visualiseur JavaScript, nous allons créer quelques lignes de code pour voir comment le contexte d'exécution de la fonction fonctionne en conjonction avec le contexte d'exécution global.

Nous allons créer deux variables contenant deux valeurs et une fonction pour ajouter deux nombres.

var number1 = 10;
var nombre2 = 10;


fonction sum(n1 n2) { 
  return n1 + n2;
}

Avec ceci, nous pouvons voir que notre contexte d'exécution global a changé.

Au départ, il y a deux phases dans le contexte d'exécution global :

1. Création –  À l'intérieur de cette phase, l'objet global et le mot-clé this sont établi. La mémoire est allouée aux variables et fonctions créées. Vous pouvez voir que nos variables ont la valeur « undefined ».
2. Execution  –  À l'intérieur de cette phase, l'exécution du code commence. Dans notre exemple, nous avons attribué des valeurs à nos variables et défini notre fonction.

Accédez à notre visualiseur JavaScript et cliquez sur le bouton « Exécuter ». On voit que le contexte global d'exécution va changer et les valeurs de nos variables vont être affectées en phase d'exécution.

Contexte d'exécution de fonction

Un contexte d'exécution de fonction est créé lorsqu'une fonction est exécutée.

Nous allons ajouter une seule ligne de code dans notre exemple. Nous allons invoquer la fonction somme et voir ce qui se passe.

var number1 = 10;
var number2 = 10[19659028];

fonction somme(n1, n2) { 
  retour n1 + n2;
}

sum(number1, number2);

Accédez à nouveau à notre Visualiseur JavaScript et cliquez sur le bouton « Exécuter ». Nous pouvons voir que notre contexte d'exécution global a encore changé, et un nouveau contexte d'exécution a été créé.

Le nouveau contexte d'exécution créé est le contexte d'exécution de la fonction. Il a les mêmes phases et nous avons accès à une valeur spéciale appelée arguments. La valeur arguments correspond aux arguments que nous avons transmis à notre fonction lors de son exécution.

Une fonction peut exécuter une fonction à l'intérieur, et ainsi de suite. Chaque fois qu'une fonction est exécutée, un nouveau contexte d'exécution de fonction est créé.

Eval Execution Context

La fonction eval est créée pour transformer une chaîne en code JavaScript exécutable. Bien qu'elle semble très puissante, il est déconseillé d'utiliser cette fonction car nous ne pouvons pas en contrôler les privilèges.

L'utilisation de la fonction eval peut ouvrir votre application ou service à des attaques par injection. La chaîne que la fonction eval reçoit peut être une chaîne malveillante qui peut totalement détruire votre base de données ou votre application. C'est pourquoi la fonction eval est obsolète et n'est pas utilisée. Les développeurs JavaScript peuvent être confus et décrire de manière incorrecte les termes auxquels ils font référence.

Le contexte d'exécution et la portée ne sont pas la même chose.

La portée est basée sur les fonctions. La portée appartient à l'accès aux variables d'une fonction. Il n'y a que deux portées dans JavaScript  : la portée globale et la portée de fonction.

Le contexte d'exécution est basé sur les objets. Le contexte d'exécution est un concept abstrait qui contient des informations sur l'environnement dans lequel le code actuel est exécuté. Un contexte d'une fonction est la valeur du mot-clé this pour cette fonction.

Conclusion

Les concepts de base de JavaScript peuvent changer totalement la donne pour le développement d'applications modernes. Le contexte d'exécution est un concept très important à saisir pour savoir comment le code JavaScript s'exécute sous le capot. Il est présent dans chaque code JavaScript écrit et c'est l'une des exigences pour apprendre d'autres concepts JavaScript tels que le levage, les fermetures, la portée, etc.