JavaScript Function bind()

En JavaScript, la valeur de this à l'intérieur d'une méthode est déterminée au moment où la fonction est appelée, et non au moment où elle est écrite. Dès que vous détachez une méthode de son objet — en la passant comme callback ou à setTimeout — elle oublie à quel objet elle appartenait. La liaison de fonctions est la solution : elle verrouille définitivement this sur un objet choisi, de sorte que la méthode se comporte de la même façon quel que soit l'endroit où elle est appelée.

Ce chapitre explique quand et pourquoi this se perd, comment func.bind() résout ce problème, comment utiliser bind pour l'application partielle, et comment bind se compare aux fonctions fléchées.

Le problème de la « perte de this »

Une méthode fonctionne correctement quand elle est appelée sous la forme object.method(), car this est défini sur ce qui se trouve à gauche du point. Mais si vous passez cette même méthode ailleurs, le point disparaît — et this est perdu.

Le deuxième appel affiche Hello, undefined! car runLater a invoqué callback() comme une fonction ordinaire, donc this n'est plus user. (En mode strict, this vaut undefined et lire this.firstName lèverait une TypeError.)

La même chose se produit avec setTimeout — il stocke la fonction et l'appelle plus tard de lui-même, sans objet attaché :

Pour en savoir plus sur la résolution de this à l'intérieur des méthodes, consultez Méthodes d'objet, « this ».

Résoudre le problème avec func.bind()

La méthode func.bind(thisArg) retourne une nouvelle fonction dont this est définitivement fixé à thisArg. La fonction originale n'est pas modifiée — vous obtenez une copie liée.

Un pattern courant consiste à stocker la version liée sur l'objet lui-même, afin que chaque référence puisse être transmise en toute sécurité :

La liaison n'a lieu qu'une seule fois

Une fois qu'une fonction est liée, this est fixé pour toujours. Appeler bind à nouveau sur le résultat ne change rien — la deuxième liaison est ignorée.

Application partielle : prédéfinir des arguments

bind accepte des arguments après thisArg, qui sont transmis à la fonction originale avant tout argument ultérieur. Cela permet de créer une fonction spécialisée à partir d'une fonction plus générale — c'est ce qu'on appelle l'application partielle.

Vous pouvez également prédéfinir this et des arguments ensemble :

bind vs. fonctions fléchées

Une fonction fléchée n'a pas son propre this — elle prend this de la portée englobante au moment où elle est écrite (this lexical). Les fonctions fléchées constituent ainsi une alternative légère à bind lorsque vous devez conserver le this externe à l'intérieur d'un callback :

Quel choix faire :

• Utilisez une fonction fléchée pour capturer le this courant en ligne, notamment dans les callbacks où vous n'avez pas besoin d'une fonction réutilisable séparément.
• Utilisez bind lorsque vous avez besoin d'une fonction autonome avec un this fixe à transmettre ailleurs, ou lorsque vous souhaitez également prédéfinir des arguments. Contrairement à une fonction fléchée, une fonction liée peut être stockée, réutilisée et transmise par son nom.

Un point d'attention : une fonction fléchée ne peut pas être utilisée comme méthode d'objet qui dépend de this pointant vers l'objet, car elle capture this depuis la portée englobante (souvent l'objet global) au lieu du contexte d'appel.

Dans quels cas l'utiliser ?

• Passer une méthode à un gestionnaire d'événement, à setTimeout/setInterval, à Promise.then, ou à des méthodes de tableau comme forEach.
• Construire des fonctions spécialisées à partir de fonctions générales grâce à l'application partielle (ex. bind(null, presetArg)).
• Chaque fois qu'une méthode doit continuer à fonctionner après avoir été détachée de son objet.

Si vous devez appeler une fonction avec un this choisi immédiatement (plutôt que de créer une copie réutilisable), utilisez call/apply à la place — consultez Décorateurs et transfert, call/apply. Pour une étude plus approfondie de this dans les fonctions fléchées, consultez Les fonctions fléchées revisitées.

Pratique