Introduction

Êtes-vous prêt à entrer dans le monde amusant de JavaScript et à découvrir le pouvoir secret du mot-clé "this" ? Préparez-vous pour un voyage incroyable à travers le domaine intéressant de "ceci", où vous découvrirez les causes de ses actions et réaliserez toute la puissance de votre code. Avec des exemples captivants et des explications limpides, ce guide vous emmènera dans un voyage passionnant à travers les différentes fixations de "ceci". Vous serez équipé pour gérer toute difficulté de codage qui se présentera à la fin de ce voyage, et vous aurez l'assurance de construire des systèmes robustes et évolutifs. Alors sans plus tarder, attachez vos bottes de code et voyageons à travers les territoires inexplorés du mot-clé "ceci" !

Le mot clé "this" en JavaScript fait référence à l'objet dont la fonction actuelle est une méthode. Il s'agit d'une variable à portée dynamique, ce qui signifie que sa portée change en fonction du contexte de l'appel de la fonction pendant l'exécution. "ceci" est un concept clé et souvent mal compris en JavaScript, car sa signification peut varier considérablement en fonction du contexte dans lequel il est utilisé.

Liaisons de "ceci"

Le mot clé "this" a quatre liaisons principales en JavaScript : liaison par défaut, liaison implicite, liaison explicite et nouvelle liaison. Comprendre ces liaisons est essentiel pour utiliser efficacement le mot-clé "this" en JavaScript, car ils spécifient chacun comment "this" doit être utilisé dans un contexte spécifique.

1. Liaison par défaut

Lorsque le terme "this" est utilisé en dehors d'une fonction ou dans la portée globale de JavaScript, il est lié par défaut. Dans ce cas, "this" fait référence à l'objet global, qui est soit "window" dans un navigateur, soit "global" dans Node.js.

Voici un exemple de liaison par défaut en action :

Comme le montre la première instruction console.log, le mot clé "this" dans l'exemple ci-dessus fait référence à l'objet global lorsqu'il est utilisé en dehors de toute fonction. La deuxième phrase console.log montre que lorsqu'elle est utilisée dans la fonction logThis, elle fait également référence à l'objet global.

Il est essentiel de se rappeler qu'en mode strict, l'objet global est indéfini et non la valeur de "this" dans la portée globale. Vous pouvez activer le mode strict en ajoutant "use strict" au début de votre code ou à l'intérieur d'une fonction comme indiqué ci-dessous.

2. Liaison implicite

Le mot clé "this" dans cette liaison fait référence à l'objet dont la fonction est une propriété. "this" spécifie l'objet lorsqu'une fonction est utilisée comme méthode d'un objet. L'objet dont la fonction est une propriété détermine la valeur de "this".

Prenons par exemple,

La fonction « greet » est un attribut de l'objet « person » dans l'exemple ci-dessus. Nous pouvons accéder à la propriété name de l'objet « person » en appelant person.greet(), qui définit la valeur de this dans la méthode greet à l'objet person. Une liaison implicite peut être observée dans cette situation. La liaison implicite est illustrée par ceci.

Prenons un autre exemple :

Dans cet exemple, l'objet « instructeur » a la fonction « sayName » définie en tant que propriété, et lorsque l'instructeur.say() est appelé, l'objet « instructeur » est défini comme la valeur de « this » dans la fonction « sayName ». . Ceci est un autre exemple de liaison implicite.

3. Liaison explicite

Peu importe comment ou où une fonction est appelée dans le code, vous pouvez explicitement définir la valeur de « this » pour un appel à l'aide d'une méthode de liaison explicite.

Trois méthodes de liaison explicite existent en JavaScript : « call », « apply », et « bind ».

Vous pouvez appeler une fonction en utilisant la méthode « call », et vous pouvez également définir la valeur de « this » pour cet appel de fonction. La valeur que vous souhaitez définir pour « this » est le premier argument de la méthode d'appel, et les autres arguments sont envoyés à la fonction individuellement.

Prends pour exemple:

La méthode « call » est utilisée dans l'exemple ci-dessus pour invoquer la fonction « sayName » et la valeur de « this » est définie sur l'objet instructeur.

Similaire à « call » est la méthode « apply » , sauf qu'elle accepte un tableau d'arguments plutôt que des arguments individuels.

Regardons un exemple :

Dans l'exemple ci-dessus, la méthode « apply » a été utilisée pour appeler la sayNamefonction et définir la valeur de « this » sur l' objet « instructeur ». Les arguments de la fonction sont passés sous forme de tableau.

La méthode " bind " crée une nouvelle fonction en utilisant le premier argument passé à "bind" comme valeur de "this". L'argument donné à "bind" est défini comme la valeur de "this" dans la fonction d'origine lorsque la nouvelle fonction est appelée ultérieurement.

Voici un exemple ci-dessous :

Dans l'exemple ci-dessus, la méthode « bind » a été utilisée pour créer une nouvelle fonction « instructeurSayName » en utilisant « this » défini sur l' objet « instructeur ». Lorsque la fonction « instructorSayName » a été appelée plus tard, la valeur de « this » dans la fonction « sayName » a été définie sur l'objet « instructor », comme si nous avions utilisé « call » ou « apply ».

4. Nouvelle reliure

Le processus par lequel le mot-clé « this » est lié à un objet nouvellement construit lorsqu'une fonction est appelée avec l'opérateur « new » est appelé liaison « new ».

Lorsqu'une fonction est appelée avec l'opérateur « new », un nouvel objet est créé et le mot-clé « this » dans la fonction est défini sur cet objet nouvellement créé. De plus, le prototype de l'objet nouvellement créé est défini sur la propriété prototype de la fonction.

Prends pour exemple:

Dans l'exemple ci-dessus, un nouvel objet est créé en utilisant l'opérateur « new » pour appeler la fonction « Person ». Les propriétés « name » et « greet » sont ajoutées à l'objet, et le mot-clé « this » dans la fonction « Person » est défini sur l'objet nouvellement généré.

Il est crucial de garder à l'esprit que l'objet nouvellement créé est renvoyé sans avoir besoin d'une instruction « return » lorsqu'une fonction est appelée à l'aide de l'opérateur « new ». Si une instruction "return" est utilisée et qu'elle renvoie un objet, cet objet sera renvoyé à la place de l'objet nouvellement créé. Si une instruction "return" est utilisée et qu'elle renvoie une valeur non objet, l'objet nouvellement créé sera quand même renvoyé.

Fonction flèche et "ceci"

Les fonctions fléchées de JavaScript fournissent un raccourci pour écrire des fonctions anonymes (fonctions sans nom). La façon dont ils lient le mot-clé "this" les distingue des expressions de fonction conventionnelles.

La valeur de "this" dans les expressions de fonction conventionnelles dépend de la façon dont la fonction est invoquée. Comme expliqué précédemment, il peut être explicitement défini à l'aide des commandes « call », « apply » ou « bind », ou implicitement défini en fonction de l'objet contenant la fonction.

Cependant, dans les fonctions fléchées, le contexte dans lequel la fonction fléchée a été générée, et non la manière dont elle est invoquée, détermine la valeur de "this". Cela signifie que si une fonction fléchée n'est pas à l'intérieur d'une autre fonction, le mot clé "this" à l'intérieur de la fonction fléchée fera toujours référence à la valeur "this" de la fonction externe ou de l'objet global.

En termes simples, les fonctions fléchées n'ont pas leur propre valeur "this" ; à la place, ils héritent de la valeur "this" de la portée englobante.

Par exemple:

Voici un autre exemple de fonction fléchée qui fait référence au mot-clé "this" de la fonction externe :

Dans l'exemple ci-dessus, la fonction « accueil » dans cet exemple a été définie comme une fonction de flèche à l'intérieur de la fonction « Personne ». La valeur « ceci » dans la fonction de flèche correspondait à la valeur « ceci » de la fonction « Personne », qui a été attribuée à l'objet nouvellement généré « elie », lorsque la fonction « accueil » a été invoquée.

Il convient de mentionner que l'utilisation de "call", "apply" ou "bind" ne peut pas modifier la liaison "this" dans les fonctions fléchées. Quelle que soit la méthode utilisée pour appeler la fonction, la valeur "this" dans une fonction fléchée reste la même. Cela rend les fonctions fléchées particulièrement utiles pour les rappels et les gestionnaires d'événements, où la valeur de "this" change fréquemment de manière inattendue.

Conclusion

En conclusion, apprendre le mot-clé "this" de JavaScript est une étape cruciale pour devenir un véritable expert JavaScript. Ce concept essentiel mais souvent déroutant peut faire ou défaire votre code et est la clé pour utiliser toutes les capacités du langage. Vous serez en mesure d'écrire du code qui est non seulement plus efficace mais aussi plus élégant et dynamique si vous avez une compréhension approfondie de la liaison par défaut, de la liaison implicite, de la liaison explicite et de la nouvelle liaison, qui sont les quatre liaisons de base de "ceci". . La capacité à développer un code flexible, adaptatif et évolutif qui peut grandir et évoluer à mesure que vos projets et vos exigences changent vous permettra de relever tous les défis qui se présenteront à vous. Alors, adoptez le mot-clé "this", maîtrisez-le et devenez un véritable ninja JavaScript !