Compréhension approfondie de la portée et du contexte des compétences Javascript_javascript

Aperçu

L'implémentation de la portée et du contexte en Javascript est une caractéristique unique du langage Javascript. Dans une certaine mesure, le langage Javascript est très flexible. Les fonctions en Javascript peuvent prendre en charge divers contextes et les portées peuvent être encapsulées et enregistrées. C’est précisément grâce à ces caractéristiques que Javascript fournit également de nombreux modèles de conception utiles. Cependant, la portée et le contexte sont également des domaines dans lesquels les programmeurs Javascript sont souvent confus lors du développement.
Ce qui suit vous présentera les concepts de portée et de contexte en Javascript, ainsi que leurs différences.

Portée VS Contexte

La première chose importante à noter est que la portée et le contexte ne sont pas les mêmes concepts, et qu'ils ne font pas référence à la même chose. En tant que geek du front-end, je vois souvent des articles qui confondent ces deux concepts. Du coup, certaines choses deviennent moins claires à mesure que je les lis. Ces deux concepts semblent avoir longtemps été confondus. Par conséquent, j’ai vérifié beaucoup d’informations et expliqué brièvement ces deux concepts. :stuck_out_tongue_closed_eyes:
En Javascript, lorsqu'une fonction est appelée, il existe une portée et un contexte liés à la fonction. Fondamentalement, la portée est basée sur la fonction et le contexte est basé sur les objets. En d’autres termes, la portée s’applique à l’accès aux variables au sein d’une fonction lorsque la fonction est appelée. Le contexte fait généralement référence à la valeur du mot-clé « this », qui est une référence à l'objet propriétaire du code en cours d'exécution.

Portée variable

Les variables peuvent être définies dans la portée locale ou globale, appelées respectivement variables locales et variables globales. Les variables globales font référence aux variables déclarées en dehors de la fonction. Les variables globales sont accessibles n'importe où dans le programme. Les variables locales font référence aux variables définies dans le corps de la fonction. Elles ne sont accessibles que dans le corps de la fonction ou dans les fonctions imbriquées, et ne sont pas accessibles en dehors de la fonction.
Javascript ne prend actuellement pas en charge la portée au niveau du bloc (variables définies dans les instructions if, switch, for, etc.). Cela signifie que les variables définies à l'intérieur d'un bloc sont également accessibles en dehors du bloc. Cependant, dans ES6, nous pouvons définir la portée au niveau du bloc à l'aide du mot-clé « let ».
Concernant le contenu du scope, vous pouvez vérifier d'autres informations. Cette partie du contenu est relativement simple.

"ce" contexte

Le contexte dépend généralement de la manière dont la fonction est appelée. Lorsqu'une fonction est appelée comme méthode sur un objet, « this » fait référence à l'objet sur lequel la fonction a été appelée.

Copier le code Le code est le suivant :

var obj={
foo:fonction (){
console.log(this === obj);
>
};
obj.foo(); //Sortie vrai

De même, lorsque nous utilisons le mot-clé « new » pour créer un nouvel objet, cela fait référence à l'objet nouvellement créé.

Copier le code Le code est le suivant :

fonction foo(){
console.log(this);
>
foo(); //Fenêtre de sortie
var obj=new foo(); //Sortie foo {}

Une chose à noter est que lorsqu'une fonction dans la portée globale est appelée, cela fait référence à l'objet global, qui dans l'environnement du navigateur fait référence à la fenêtre. Cependant, lors de l'exécution du code en mode strict, "this" est défini sur "undefined"
Contexte d'exécution

Javascript est un langage monothread, ce qui signifie que lorsque Javascript est exécuté dans le navigateur, il ne peut faire qu'une seule chose à la fois, et d'autres choses seront mises en file d'attente dans la méthode, en attente d'être traitées.

1. Lorsque le fichier de code Javascript est chargé par le navigateur, la dernière entrée est un contexte d'exécution global par défaut. Lorsqu'une fonction est appelée dans le contexte global, le programme entre dans la fonction appelée et le moteur Javascript crée un nouveau contexte d'exécution pour la fonction et le place en haut de la pile de contextes d'exécution. Le navigateur exécute toujours le contexte actuellement en haut de la pile. Une fois l'exécution terminée, le contexte est extrait du haut de la pile, puis exécute le code dans le contexte situé en dessous. De cette façon, les contextes de la pile seront exécutés séquentiellement et retirés de la pile jusqu'à revenir au contexte global.

2. Un contexte d'exécution peut être divisé en deux phases : la phase de création et la phase d'exécution. Lors de la phase de création, l'interpréteur JavaScript crée d'abord un objet variable (également appelé « objet d'activation »). Les objets actifs sont constitués de variables, de déclarations de fonctions et de paramètres. À ce stade, la chaîne de portée de la fonction est initialisée et l'objet référencé par celle-ci est également déterminé. Vient ensuite la phase d’exécution, où le code est interprété et exécuté.
Dans le code Javascript, il peut y avoir n'importe quel nombre de contextes de fonction. Nous savons déjà que lorsqu'une fonction est appelée, l'interpréteur Javascript créera un nouveau contexte et une portée privée. Toutes les variables déclarées à l'intérieur de la fonction ne seront pas accessibles directement à l'extérieur. l'étendue de la fonction actuelle.

3. Grâce à l'explication ci-dessus, nous avons une notion de base du "contexte d'exécution" de la fonction, mais c'est aussi l'endroit où tout le monde est le plus confus. Le « contexte d'exécution » en Javascript fait principalement référence à la portée, et non au « ce contexte » mentionné dans la quatrième section ci-dessus. Il existe de nombreux concepts similaires déroutants en Javascript, mais tant que nous comprenons l'objet spécifique auquel chaque concept fait référence, nous ne serons plus confus. Par conséquent, j'espère également que tout le monde pourra vraiment distinguer « le contexte d'exécution » et « ce contexte ». ".

En une phrase simple, le contexte d'exécution est un concept lié à la portée, même si celui-ci peut ne pas être rigoureux.

Chaîne de portée

Pour chaque contexte d'exécution, une portée lui est liée. La chaîne de portée contient l'objet d'activation du contexte d'exécution (ce qui semble un peu compliqué) dans la pile de contexte d'exécution. La chaîne de portée détermine l'accès aux variables et la résolution des identifiants.

Exemple de code :

Copier le code Le code est le suivant :

fonction d'abord(){
Deuxième();
Fonction seconde(){
        tiers();
         fonction troisième(){
            quatrième();
             fonction quatrième(){
//Code
            }
>
>
>
premier();

Exécutez le code ci-dessus et les fonctions imbriquées seront exécutées. En ce qui concerne le code ci-dessus, une chaîne de portées sera également formée. L'ordre de la chaîne de portées de haut en bas est : quatrième, troisième, deuxième, premier, global. La fonction quatrième peut accéder aux variables de la portée globale et peut accéder à toutes les variables définies dans les fonctions troisième, deuxième et première.
Une chose à noter est que dans le corps de la fonction, les variables locales ont une priorité plus élevée que les variables globales du même nom. Si une variable locale déclarée dans une fonction ou une variable contenue dans un paramètre de fonction porte le même nom qu'une variable globale, la variable globale sera écrasée par la variable locale.
Pour faire simple, chaque fois que nous essayons d'accéder à une variable, le programme recherchera la variable dans la portée de la fonction actuelle. Si elle ne peut pas être trouvée, il recherchera le long de la chaîne de portée jusqu'au niveau supérieur de la fonction. la variable est trouvée. Si elle est introuvable, renvoie undéfini.

Résumé

Cet article présente les concepts associés de contexte et de portée en javascript. Il existe également plusieurs concepts plus importants en javascript, tels que les fermetures, etc. Si vous les comprenez à l'avenir, vous écrirez un article~~