JavaScript - 7.9 Le mot clé this en JavaScript

Le mot clé this est souvent source de confusion pour les débutants en JavaScript. Il désigne l'objet qui exécute la fonction en cours. Sa valeur change selon l'endroit où la fonction est définie et appelée. Cette leçon présente les cas les plus courants, avec une règle simple pour chacun.

Le mot clé dans une méthode

Une fonction rangée dans un objet s'appelle une méthode. Dans une méthode, le mot clé désigne l'objet lui-même. Cette règle explique la plupart des cas simples.

Prenons un objet vidéo avec une propriété title et une méthode play. Dans play, on écrit this.title pour lire le titre de cet objet. Une méthode ajoutée plus tard, comme stop, se comporte de la même façon, car elle appartient aussi à l'objet vidéo.

Le mot clé dans une fonction ordinaire ou un constructeur

Une fonction ordinaire, qui n'appartient à aucun objet, a pour référence l'objet global. Dans un navigateur, cet objet global est window.

Une fonction constructeur s'appelle avec le mot clé new, et s'écrit généralement avec une majuscule, par convention. Dans ce cas, le mot clé désigne un nouvel objet vide, créé pour l'occasion, auquel la fonction ajoute ses propriétés.

Le piège des fonctions de rappel

Dans une fonction de rappel passée à forEach, la fonction est ordinaire. Le mot clé ne désigne donc plus l'objet vidéo, mais l'objet global. Le contexte du rappel est celui d'une fonction ordinaire, pas celui de la méthode qui l'appelle. Le résultat surprend souvent les débutants, et il est facile à vérifier avec console.log.

La méthode forEach accepte un second argument, qui fixe la valeur du mot clé dans le rappel. En passant this comme second argument, la fonction de rappel retrouve l'objet vidéo et son titre.

const video = {
  title: 'Mon titre',
  tags: ['a', 'b', 'c'],
  afficherTags() {
    this.tags.forEach(function (tag) {
      console.log(tag, this.title);
    }, this);
  }
};

En résumé

Le mot clé désigne l'objet qui exécute la fonction. Dans une méthode, il désigne l'objet lui-même. Dans une fonction ordinaire, il désigne l'objet global. Avec new, il désigne un nouvel objet. Dans un rappel, un second argument permet parfois de préciser l'objet voulu.

Points clés

• Le mot clé désigne l'objet qui exécute la fonction en cours.
• Dans une méthode, il désigne l'objet qui contient la méthode.
• Dans une fonction ordinaire, il désigne l'objet global, window dans un navigateur.
• Avec new, il désigne un nouvel objet vide créé par le constructeur.
• Dans un rappel de forEach, un second argument permet de fixer sa valeur.

Questions fréquentes

Qu'est-ce que window ?

C'est l'objet global du navigateur. Dans une fonction ordinaire, le mot clé y fait référence.

Pourquoi les fonctions constructeurs commencent-elles par une majuscule ?

C'est une convention. Elle permet de reconnaître une fonction qui s'utilise avec le mot clé new.

Comment savoir quelle valeur prend le mot clé ?

Affichez-le avec console.log à l'endroit voulu. Le résultat montre quel objet est utilisé à cet endroit du code.