Qu'est-ce que c'est que « ce » mot clé en JavaScript ?

Informations clés :

• Portée globale : Dans le contexte global, cela fait référence à l'objet global (par exemple, la fenêtre).

• Contexte de la fonction : à l'intérieur des fonctions régulières, cela se comporte différemment en modes strict et non strict, renvoyant un objet défini ou global.

• Méthodes : Dans les méthodes objet, cela fait référence à l'objet lui-même, permettant d'accéder à ses propriétés.

• Call, Apply, Bind : Ces méthodes permettent le partage de fonctions entre objets en modifiant ce contexte.

• Fonctions fléchées : Les fonctions fléchées n'ont pas leur propre this, héritant de leur contexte lexical englobant.

• Éléments DOM : dans les gestionnaires d'événements DOM, cela fait référence à l'élément HTML qui a déclenché l'événement.

La portée mondiale

Pour commencer, examinons comment « ceci » se comporte dans le cadre global. En JavaScript, lorsque vous faites référence à « ceci » au niveau supérieur de votre code, il fait référence à l'objet global. Dans un navigateur web, cet objet global est la fenêtre.

Par exemple :

    console.log(this); // Outputs: Window

Dans Node.js, cependant, l'objet global est différent et est appelé global.

Ainsi, la valeur de « this » peut varier en fonction de l'environnement dans lequel votre code JavaScript s'exécute.

Comprendre « ceci » dans les fonctions internes

Ensuite, explorons comment « ceci » se comporte à l'intérieur des fonctions. Lorsque vous définissez une fonction et que vous l'appelez, la valeur de "this" à l'intérieur de cette fonction dépendra de la manière dont la fonction est appelée.

En mode non strict, si vous enregistrez "this" au sein d'une fonction, il fera également référence à l'objet global :

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

Cependant, si vous activez le mode strict en ajoutant « use strict » ; en haut de votre fonction, "this" sera undéfini :

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

Ce comportement est le résultat de cette substitution, qui stipule que si "this" est nul ou indéfini en mode non strict, il est par défaut l'objet global.

Mode strict vs mode non strict

Comprendre la différence entre le mode strict et non strict est crucial. En mode non strict, la valeur de "this" peut être l'objet global, mais en mode strict, elle devient indéfinie si elle n'est pas explicitement liée à un objet.

Pour récapituler :

• Dans l'espace global, « ceci » fait référence à l'objet global.
• Dans une fonction, "this" peut faire référence à l'objet global en mode non strict mais n'est pas défini en mode strict.

Comment fonctionne "ceci" dans les méthodes objet

Voyons maintenant comment "this" se comporte dans les méthodes objet. Lorsqu'une fonction est définie à l'intérieur d'un objet, elle est considérée comme une méthode, et "this" fera référence à cet objet lorsque la méthode est appelée :

    console.log(this); // Outputs: Window

Ici, "this" fait référence à "obj", l'objet dans lequel la méthode est définie.

Méthodes de partage avec Call, Apply et Bind

Pour partager des méthodes entre objets, JavaScript fournit trois fonctions : call, apply et bind. Chacun d'entre eux vous permet de définir explicitement la valeur de "this" :

• call : Appelle une fonction avec une this valeur et des arguments spécifiés.
• apply : Similaire à call, mais accepte un tableau d'arguments.
• bind : Renvoie une nouvelle fonction avec une this valeur spécifiée.

Par exemple :

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

Dans ce cas, "this" à l'intérieur de printName fait référence à student2 au lieu de student1.

Fonctions fléchées et "ceci"

Les fonctions fléchées se comportent différemment des fonctions traditionnelles. Ils n'ont pas leur propre contexte « ce » ; au lieu de cela, ils héritent de « ceci » de leur contexte lexical englobant. Cela signifie que "ceci" dans une fonction fléchée fait référence à la même valeur qu'en dehors de la fonction :

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

Ici, "this" dans la fonction flèche fait référence à l'objet "obj", démontrant comment les fonctions fléchées capturent la valeur "this" à partir de leur contexte englobant.

"ceci" dans le DOM

Enfin, lorsque l'on travaille avec le DOM, "this" peut faire référence à l'élément HTML qui a déclenché un événement. Par exemple :

    const obj = {
        name: 'My Object',
        getName: function() {
            console.log(this.name);
        }
    };
    obj.getName(); // Outputs: My Object

Dans ce cas, lorsque l'on clique sur le bouton, "this" fera référence à l'élément bouton lui-même.

Merci d'avoir lu, et si vous avez trouvé ce guide utile, partagez-le avec d'autres développeurs et continuez à vous entraîner pour consolider votre compréhension de « ceci » en 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!