Méthodes d'objet JavaScript et this

Introduction aux méthodes d'objet en JavaScript

Les objets JavaScript sont des collections de propriétés, et les méthodes d'objet sont des fonctions stockées en tant que propriétés de ces objets. Les méthodes permettent à un objet de faire des choses avec ses propres données, et pas seulement de les conserver.

Ce guide explique comment définir et appeler des méthodes, comment le mot-clé this relie une méthode à son objet, comment lire et modifier l'état d'un objet depuis l'intérieur des méthodes, ainsi que le piège le plus courant du langage : la perte de this dans les callbacks. Il se termine par la différence pratique entre les fonctions régulières et les fonctions fléchées.

Définir et appeler des méthodes

Une méthode est simplement une propriété dont la valeur est une fonction. La syntaxe abrégée greet() { ... } est la façon moderne de l'écrire ; elle est équivalente à greet: function() { ... }.

greet est une méthode de l'objet user. Elle utilise this.name pour accéder à la propriété name de l'objet, illustrant ainsi comment les méthodes peuvent agir sur les données de leur propre objet. On appelle une méthode avec la même syntaxe pointée que pour n'importe quelle propriété, suivie de () : user.greet().

Le mot-clé this dans les méthodes

Le mot-clé this fait référence à l'objet avant le point au moment où la méthode est appelée. Il est déterminé au moment de l'appel, et non à l'écriture de la fonction — c'est ce qui rend this flexible mais aussi source d'erreurs.

Exemple : utiliser this dans les méthodes

Dans la méthode details, this fait référence à l'objet person lui-même, permettant d'accéder à ses propriétés name et age pour produire un message personnalisé. Comme details a été appelée sous la forme person.details(), this est person.

Modifier les propriétés d'un objet

Les méthodes ne servent pas seulement à récupérer des valeurs de propriétés, mais aussi à les mettre à jour.

Exemple : mettre à jour des propriétés

La méthode promote met à jour la propriété jobTitle et affiche un message reflétant le changement. Cela illustre comment les méthodes peuvent modifier dynamiquement l'état interne d'un objet.

Utiliser les méthodes pour des calculs

Les méthodes sont également utiles pour effectuer des calculs basés sur les propriétés d'un objet.

Exemple : calculer des valeurs

La méthode area calcule la surface du rectangle à partir des propriétés width et height. Cet exemple montre comment les méthodes peuvent encapsuler une fonctionnalité qui opère sur les données stockées dans un objet.

Emprunter des méthodes

Puisque this est résolu au moment de l'appel, la même fonction peut s'exécuter sur différents objets. C'est le fondement de l'emprunt de méthodes.

Exemple : emprunter une méthode

Ici, la méthode speak de l'objet dog est assignée à l'objet cat. Lorsqu'elle est appelée sous la forme cat.speak(), this.name fait référence à Whiskers, démontrant que this dépend de comment la méthode est appelée, et non de l'endroit où elle a été définie.

Lorsque vous ne pouvez pas réassigner la méthode mais souhaitez tout de même l'emprunter, utilisez call, apply ou bind pour définir this explicitement. Consultez Décorateurs et transfert, call/apply pour un traitement complet.

introduce.call(alice) exécute introduce avec this défini sur alice, même si introduce est une fonction autonome et non une propriété de l'un ou l'autre objet.

Chaînage de méthodes

Le chaînage de méthodes permet d'appeler plusieurs méthodes dans une seule expression, chaque méthode retournant this — l'objet lui-même. L'objet retourné devient la cible de l'appel suivant.

Exemple : implémenter le chaînage de méthodes

Chaque méthode de calculator modifie value et retourne l'objet, ce qui permet les appels chaînés. Ce modèle améliore la lisibilité et constitue la base des API fluentes comme jQuery et de nombreux helpers de tableaux.

Fonctions traditionnelles vs fonctions fléchées

En JavaScript, le comportement du mot-clé this varie considérablement entre les fonctions traditionnelles et les fonctions fléchées. Comprendre cette différence est la chose la plus importante pour écrire du code dépendant de this sans bugs.

Fonctions traditionnelles

Dans une fonction traditionnelle, this est déterminé par la façon dont la fonction est appelée. Voici comment il varie :

• Contexte global : lorsqu'une fonction est appelée sans objet avant le point, this est l'objet global (window dans les navigateurs, global dans Node) en code non strict, et undefined en mode strict ou dans les modules.

• Méthodes d'objet : lorsqu'une fonction est appelée en tant que méthode d'un objet, this fait référence à cet objet.

• Gestionnaires d'événements : lorsqu'une fonction traditionnelle est utilisée comme gestionnaire d'événement, this fait référence à l'élément qui a reçu l'événement.

<button id="myButton">Click me</button>
<p id="output">Click the button to see the result.</p>

<script>
  document.getElementById("myButton").addEventListener("click", function () {
    document.getElementById("output").innerHTML = "This button was clicked: " + this;
  });
</script>

Fonctions fléchées

Les fonctions fléchées n'ont pas leur propre this. Elles capturent this depuis la portée lexicale environnante au moment où elles sont définies. Cela les rend idéales pour les callbacks à l'intérieur d'une méthode, lorsque vous souhaitez conserver le this de la méthode.

• Contexte cohérent dans les callbacks : utile lorsque this doit rester le même dans un callback imbriqué dans une méthode.

Ici, logActions utilise une fonction fléchée à l'intérieur de forEach. La fonction fléchée hérite de this depuis logActions, ce qui lui permet de référencer correctement userProfile.name. Une fonction traditionnelle passée à forEach recevrait son propre this (l'objet global ou undefined), et this.name échouerait.

Exemple pratique

Voyons un exemple réaliste impliquant un objet qui gère le profil en ligne d'un utilisateur, illustrant les deux types de fonctions côte à côte :

Cet exemple montre clairement comment les fonctions fléchées aident à maintenir le contexte correct (this), notamment dans les callbacks imbriqués où le this dynamique d'une fonction traditionnelle échouerait silencieusement.

Perdre this et comment y remédier

Le bug classique : vous extrayez une méthode dans une variable ou la passez comme callback, et this n'est plus l'objet.

Lorsque counter.show est détaché, l'appel de show() n'a aucun objet avant le point, donc this est perdu. bind retourne une nouvelle fonction dont le this est fixé de façon permanente. La même idée s'applique à setTimeout(obj.method, 1000) (cassé) par opposition à setTimeout(() => obj.method(), 1000) (fonctionne). Pour aller plus loin, consultez Liaison de fonctions.

Conclusion

Les méthodes d'objet donnent un comportement à vos données, et le mot-clé this est ce qui relie une méthode à son objet. La règle clé : this est l'objet avant le point au moment de l'appel, il peut donc changer selon la façon dont une fonction est invoquée. Les fonctions régulières ont un this dynamique ; les fonctions fléchées capturent this lexicalement, ce qui est exactement ce que vous voulez pour les callbacks, mais inapproprié pour les méthodes de premier niveau. Lorsque this est perdu, utilisez bind, call ou apply.

Pour aller plus loin, explorez les références d'objet et le comportement de copie, les fonctions constructeurs et new, ainsi que les décorateurs avec call/apply.

Pratique