open

Javascript : Comprendre et utiliser call, apply et bind

#1 D'où sortent call, apply et bind ? open

Vous prenez la console et vous déclarez par exemple une fonction que vous appelez calculerSomme. Puis vous tapez calculerSomme. (n'oubliez pas le point)

Call, Apply, Bind

Vous pouvez constater que call, apply, bind sont des méthodes de l'objet Function. Elles vont servir à affecter la valeur de this au moment de l'appel à la fonction. Ici en l'occurrence la fonction calculerSomme.

#2 Comprendre et utiliser call ou apply open

Mieux vaut faire un exemple plutôt que de se lancer dans une explication.

  1. Vous allez déclarer un objet obj avec une propriété somme initialisée à 0.
  2. Maintenant nous décidons de fabriquer une fonction calculerSomme qui a pour objectif de manipuler la propriété somme de notre objet. Elle va lui affecter la somme des arguments qui lui seront passés au moment de l'appel. Bien sûr nous pourrions très bien passer notre objet obj en argument de calculerSomme mais ce que nous voulons c'est montrer que l'on peut affecter this.
  3. Pour pouvoir faire cela on aura donc besoin que notre fonction calculerSomme reçoive au moment de l'appel un this qui pointe sur notre objet obj et c'est l'appel à la méthode call qui va nous permettre d'obtenir ça.
Tester le code
Ci-dessous, ce qu'il faut comprendre, c'est que le calculerSomme.call(obj,2,4,6) est équivalent à un calculerSomme(2,4,6) avec un this qui pointe sur obj.
Schéma du call

Si les données à ajouter se présentent sous la forme d'un tableau nous avons avantage à utiliser apply. En fait apply fonctionne strictement de la même manière que call mais prend la liste des arguments à passer à la fonction sous la forme d'un tableau. Donc si on a un tableau à disposition et bien on prend apply plutôt que call.

Tester le code

#3 Comprendre et utiliser bind open

La méthode bind est une autre façon d'affecter this. L'avantage avec bind c'est que les choses se font en deux étapes :

  1. Dans un premier temps vous allez appeler bind. Vous lui passez en argument l'objet sur lequel vous voulez que pointe this. Le calculerSomme.bind(obj) va vous renvoyer la copie de la fonction calculerSomme avec le this correctement géré.
  2. Dans un deuxième temps vous allez invoquer la fonction et lui passer les arguments.
Tester le code
Le console.log de la fonction retournée par bind
Un console.log de la fonction retournée par bind
Le console.dir de la fonction retournée par bind
Un console.dir de la fonction retournée par bind

#4 Reprise de l'exemple du tuto précédent open

Ce script présentait un défaut de fonctionnement : dans l'instance de l'objet le this pointait sur l'élément button et pas sur l'instance obj.

Dans ce cas, qui est le cas d'un callback, on peut typiquement résoudre ce problème avec un appel à bind. Dans un premier temps obj est passé à bind lorsque le callback est passé au gestionnaire. Dans un deuxième temps le callback sera exécuté par le gestionnaire avec un this qui pointera sur obj.

Tester le code
Vous pouvez constater ci-dessous la modification de l'objet grâce à l'appel à bind
Solution du tuto précédent avec un appel à bind