Le mot clé &#this&# en JavaScript : guide du débutant

Dans ce blog, nous aborderons le mot-clé « this » en JavaScript, en explorant son fonctionnement, pourquoi il se comporte différemment dans divers contextes et comment sa maîtrise peut rendre votre code plus propre et plus efficace. À la fin, vous saurez comment utiliser efficacement « ce » mot-clé en JavaScript pour vos projets.

Alors, quel est le mot-clé « ce » en JavaScript ?

Le mot-clé "this" en JavaScript est essentiel car il permet une interaction dynamique et contextuelle au sein de votre code. Voici quelques raisons pour lesquelles il est si précieux :

• Accéder directement aux propriétés de l'objet : "ceci" vous permet d'accéder et de manipuler les propriétés et les méthodes d'un objet à partir de ses fonctions, ce qui facilite le travail direct avec l'objet.
• Gestion des événements : en JavaScript piloté par les événements, « ceci » fait souvent référence à l'élément HTML qui a déclenché l'événement. Cela facilite la gestion des interactions DOM sans transmettre explicitement des éléments aux fonctions.
• Liaison dynamique : "this" s'adapte en fonction de la façon dont une fonction est appelée, et non de l'endroit où elle est définie. Cette flexibilité permet à "this" de référencer différents objets, selon le contexte, qu'il s'agisse d'une fonction globale, d'une méthode à l'intérieur d'un objet ou d'un rappel dans un écouteur d'événement.
• Simplifie les modèles orientés objet : l'utilisation de « this » permet une approche plus orientée objet, où les propriétés et les méthodes sont encapsulées dans des objets, rendant le code organisé et évolutif.
• Exécution contextuelle : "this" permet aux fonctions de s'exécuter dans le contexte de l'objet qui les appelle. Cela signifie que vous n’avez pas besoin de passer l’objet comme argument ; "this" y fait automatiquement référence.
• Utile dans les constructeurs et les classes : dans les classes ES6 ou les fonctions de constructeur traditionnelles, "this" est indispensable pour définir les propriétés et les méthodes sur l'instance nouvellement créée, donnant à chaque instance ses propres données uniques.

Avec ces fonctionnalités, « ceci » n'est pas seulement un mot-clé, mais également un aspect fondamental de l'approche JavaScript des fonctions, des objets et du codage contextuel.

Comprendre le mot clé « this » en JavaScript dans différents contextes

En JavaScript, la valeur du mot-clé "this" n'est pas fixe et peut varier selon le contexte dans lequel une fonction est appelée. Cette nature dynamique de « ceci » est l’un des aspects les plus uniques – et parfois déroutants – de JavaScript. D'une manière générale, plusieurs contextes déterminent la valeur de « ceci ».

Décomposons chaque contexte avec des exemples pour voir comment « ceci » se comporte :

1. Contexte par défaut/global

Lorsque "this" est utilisé dans le contexte global ou dans une fonction autonome, il fait référence à l'objet global, qui est fenêtre dans le navigateur et global dans Node.js.

Exemple :

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

Ce code affiche Window { ... } dans un navigateur ou [objet global] dans Node.js. Puisque showGlobalContext est appelé dans le contexte global, "this" pointe vers l'objet global (fenêtre dans le navigateur ou global dans Node.js). Ici, il n'y a pas de liaison explicite ou implicite, donc "this" a par défaut la portée globale.

2. Liaison implicite

Lorsqu'une fonction est appelée comme méthode d'un objet, "this" fait référence à l'objet qui a appelé la méthode. C'est ce qu'on appelle la liaison implicite.

Exemple :

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

Cela affiche Bonjour, je suis Alice car greet est appelé par l'objet personne. En raison d'une liaison implicite, "this" à l'intérieur de greet fait référence à une personne, permettant l'accès à sa propriété name. La liaison implicite se produit lorsque la fonction est appelée avec un objet précédent.

3. Liaison explicite

JavaScript permet une liaison explicite de "this" à l'aide des méthodes call, apply et bind. Ces méthodes vous permettent de définir "this" directement sur un objet spécifique.

Exemple :

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

Chaque invocation de méthode renvoie Bonjour, je m'appelle Bob. Avec call et apply, nous invoquons immédiatement introduction, en définissant explicitement "this" sur user, qui a une propriété name de "Bob". La méthode bind, cependant, renvoie une nouvelle fonction avec "this" lié en permanence à l'utilisateur, permettant àboundIntroduce d'être appelé plus tard avec "this" toujours défini sur user.

4. Fonctions des flèches

Les fonctions fléchées en JavaScript n'ont pas leur propre liaison "this". Au lieu de cela, ils héritent de « ceci » de leur portée lexicale ou du contexte dans lequel ils ont été définis. Ce comportement est utile pour les rappels et les fonctions imbriquées.

Exemple :

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

Cela affiche :

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

Ici, la fonction flèche à l'intérieur de forEach ne crée pas son propre « ceci » ; au lieu de cela, il hérite de "this" de introduitTeam, qui est appelé par l'équipe. Par conséquent, "this" à l'intérieur de la fonction fléchée fait référence à team, permettant l'accès à la propriété name. Si une fonction régulière était utilisée dans forEach, "this" serait soit indéfini (en mode strict), soit pointerait vers l'objet global, conduisant à des résultats inattendus.

5. Nouvelle liaison (fonctions de constructeur)

Lorsqu'une fonction est utilisée comme constructeur (appelée avec le mot-clé new), "this" à l'intérieur de cette fonction fait référence à l'instance nouvellement créée. Ceci est utile pour créer plusieurs instances d'un objet avec leurs propres propriétés et méthodes.

Exemple :

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

Dans cet exemple, appeler new Person("Alice") crée un nouvel objet où "this" fait référence à ce nouvel objet, et non au contexte global ou à tout autre contexte. Le résultat est une nouvelle instance (personne1) avec une propriété de nom définie sur "Alice".

6. Contexte de la classe

Dans la syntaxe ES6, les classes JavaScript utilisent également le mot-clé "this" pour faire référence à l'instance de la classe dans les méthodes. Le comportement est similaire à une nouvelle liaison, car chaque instance de la classe aura son propre contexte « ce ».

Exemple :

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

Ici, "this" à l'intérieur de showModel fait référence à l'instance spécifique myCar, donnant accès à sa propriété model. Chaque instance créée avec new Car aura son propre « ceci » faisant référence à cette instance.

7. Écouteurs d'événements DOM

Dans les écouteurs d'événement, "this" fait référence à l'élément HTML qui a déclenché l'événement. Cela facilite l'accès aux propriétés ou aux méthodes de cet élément sans avoir besoin de le transmettre explicitement comme argument.

Exemple :

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

Dans ce cas, "this" à l'intérieur de l'écouteur d'événement fait référence à l'élément de bouton sur lequel l'utilisateur a cliqué, permettant d'accéder à ses propriétés et méthodes. Cependant, si vous utilisez une fonction fléchée comme gestionnaire d'événements, "this" ferait référence à la portée lexicale, ce qui entraînerait probablement un comportement inattendu.

Pièges courants avec le mot clé « this » en JavaScript

Les malentendus autour de « ceci » peuvent conduire à des résultats inattendus en JavaScript. Voici quelques pièges courants à surveiller :

1. Perdre "ceci" dans les fonctions de rappel

Lors du passage d'une méthode en tant que rappel, "this" peut perdre sa référence d'origine. Cela se produit parce que lorsqu'une fonction est appelée de manière autonome (sans qu'un objet ne l'appelle), "this" est par défaut l'objet global ou devient indéfini en mode strict.

Exemple :

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

Dans cet exemple, cela devient indéfini dans greet car setTimeout appelle greet en tant que fonction autonome, et non en tant que méthode utilisateur.

2. "ceci" inattendu dans les fonctions fléchées

Les fonctions fléchées n'ont pas leur propre contexte « ce » ; au lieu de cela, ils héritent de « ceci » de la portée lexicale environnante. Cela peut entraîner des problèmes lorsque les fonctions fléchées sont utilisées dans des situations où « ceci » doit faire référence à l'objet appelant, comme dans les méthodes ou les écouteurs d'événements. Ce comportement peut conduire à des valeurs inattendues pour « ceci » dans des scénarios où les développeurs pourraient s'attendre à un nouveau contexte « ceci ».

Exemple :

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

Ici, « this » fait référence à l'objet global au lieu du bouton, car les fonctions fléchées héritent de « this » de leur portée de définition, plutôt que du contexte de l'événement.

3. "ceci" dans les fonctions imbriquées

Lors de l'utilisation de fonctions régulières imbriquées dans des méthodes, "this" peut de manière inattendue pointer vers l'objet global plutôt que vers la fonction ou l'objet externe. Cela se produit parce que chaque appel de fonction a son propre contexte « ce ». Dans une fonction imbriquée, si "this" n'est pas lié explicitement, il revient par défaut au contexte global, ce qui peut entraîner un comportement inattendu lors de la tentative d'accès aux propriétés de l'objet externe.

Exemple :

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

Dans cet exemple, "this" à l'intérieur de showName est par défaut la portée globale plutôt que de faire référence à une personne, ce qui entraîne une sortie inattendue.

Meilleures pratiques pour utiliser le mot clé « this » en JavaScript

Maîtriser le mot-clé "this" en JavaScript peut grandement améliorer la lisibilité et la maintenabilité du code. Voici quelques bonnes pratiques pour garantir que « ceci » se comporte comme prévu dans divers contextes :

1. Utilisez les fonctions fléchées pour la portée lexicale

Pour les fonctions qui doivent conserver « ceci » de la portée environnante, utilisez les fonctions fléchées. Les fonctions fléchées n'ont pas leur propre « ceci », elles en héritent donc de l'endroit où elles ont été définies. Ceci est utile dans les rappels ou les fonctions imbriquées.

Exemple :

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

2. Utilisez Bind, Call ou Apply for Explicit Binding

Lorsque vous devez définir « ceci » sur un objet spécifique, utilisez bind, call ou apply. Ceci est utile pour les rappels ou les appels de fonction autonomes où vous souhaitez que « ceci » fasse référence à un objet spécifique.

Exemple :

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

3. Évitez « ceci » dans la portée globale

Dans la portée globale, "this" fait référence à la fenêtre (dans les navigateurs) ou à l'objet global (dans Node.js), ce qui peut conduire à des résultats inattendus. Conservez les fonctions dépendantes de "this" dans les objets ou les classes.

Exemple :

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

4. Utilisez "this" dans les classes et les constructeurs

Dans les classes ES6 ou les fonctions de constructeur, utilisez "this" pour les propriétés d'instance. Cela permet de séparer les données de chaque instance, selon une conception orientée objet.

Exemple :

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

5. Testez « ceci » dans divers contextes

Testez le comportement de « this » lorsque votre fonction est utilisée dans différents contextes, tels que des méthodes, des rappels et des écouteurs d'événements. Cela permet d'identifier des résultats inattendus dès le début du développement.

Conclusion

Dans ce blog, nous avons exploré le mot-clé "this" en JavaScript, couvrant son comportement dans divers contextes tels que les fonctions globales, implicites, explicites, les nouvelles liaisons et les flèches. Nous avons également discuté des pièges courants à éviter et des meilleures pratiques pour garantir que « cela » fonctionne comme prévu dans votre code. Maîtriser « ce » peut grandement améliorer la clarté et la flexibilité du code, vous permettant ainsi d'écrire du JavaScript plus efficace et plus maintenable.

Pour une exploration plus approfondie, n'hésitez pas à consulter la documentation MDN sur "this" mot-clé 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!