Comprendre le mot clé « this » en JavaScript : un guide complet

Le mot-clé this en JavaScript est l'un des aspects les plus puissants mais souvent mal compris du langage. Sa valeur est déterminée par la comment une fonction est appelée plutôt que par l'endroit où elle est définie, ce qui la rend cruciale pour la gestion du contexte dans votre code.

Dans ce guide, nous explorerons les nuances de cela avec des exemples pratiques et expliquerons comment le contrôler explicitement à l'aide de call, apply et bind.

---

Les bases de ceci

En JavaScript, cela fait référence à l'objet qui exécute actuellement le code. Les règles pour déterminer sa valeur dépendent du type d'invocation de la fonction :

1. Liaison implicite : c'est l'objet qui précède l'appel de la méthode.
2. Liaison explicite : cela peut être explicitement défini à l'aide d'un appel, d'une application ou d'une liaison.
3. nouvelle liaison : dans les fonctions de constructeur, cela fait référence à l'objet nouvellement créé.
4. Liaison globale/fenêtre : si aucune des règles ci-dessus ne s'applique, la valeur par défaut est l'objet global (fenêtre dans les navigateurs ou global dans Node.js).

---

1. Liaison implicite : contexte de l'appelant

Lorsqu'une fonction est appelée comme méthode d'un objet, cela fait référence à l'objet avant le point.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

Dans cet exemple, this.model pointe vers la propriété model de l'objet car car car est l'appelant.

---

2. Liaison explicite : utilisation de l'appel, de l'application et de la liaison

Lorsque vous avez besoin d'un contrôle précis sur la valeur de ceci, vous pouvez utiliser call, apply ou bind.

un. appel

La méthode d'appel appelle immédiatement une fonction avec une valeur this spécifiée et des arguments individuels.

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

Ici, call garantit que this.name fait référence à la propriété name de l'objet personne.

b. appliquer

La méthode apply est similaire à call mais prend les arguments sous forme de tableau plutôt qu'individuellement.

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

Cela rend apply particulièrement utile lorsque vous avez un ensemble d'arguments à transmettre.

c. lier

La méthode bind renvoie une nouvelle fonction avec celle-ci définie de manière permanente sur un objet spécifié, permettant un appel retardé.

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

Avec bind, vous créez une fonction réutilisable liée à un contexte spécifique.

---

3. nouvelle liaison : création d'objets avec des fonctions de constructeur

Lorsqu'une fonction est appelée avec le mot-clé new, cela fait référence au nouvel objet en cours de création.

function Person(name) {
  this.name = name;
}

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

L'opérateur new définit ceci sur l'objet nouvellement créé, vous permettant de définir des plans d'objets réutilisables.

---

4. Liaison globale/fenêtre : la solution de repli

Si aucune des règles ci-dessus ne s'applique, la valeur par défaut est l'objet global. Cependant, en mode strict (« use strict »), ceci n'est pas défini dans de tels cas.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

Soyez prudent avec la liaison globale car elle peut conduire à un comportement inattendu.

---

Résumé de l'appel, de la candidature et de la liaison

Voici une comparaison rapide :

Method	Purpose	Execution	Argument Passing
call	Immediate invocation	Yes	Individually
apply	Immediate invocation	Yes	Array of arguments
bind	Delayed invocation (returns new function)	No	Individually or partially

---

Conclusion

La maîtrise du mot-clé this est essentielle pour écrire du code JavaScript propre et contextuel. En comprenant les liaisons implicites, explicites, nouvelles et globales, vous pouvez gérer cela en toute confiance dans différents scénarios. Des outils tels que call, apply et bind offrent un contrôle granulaire, rendant vos fonctions flexibles et réutilisables.

Suivez-moi sur : Github Linkedin

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!