: javascript

Apply et Call

Lorsqu'une fonction est exécutée elle est liée à une instance d'un objet. Elle peut accéder aux propriétés et méthodes de cette instance avec l'opérateur this, par exemple:

function test() {
  this.x = 12; // modifie la propriété x de l'instance
  alert(this.y); // affiche la valeur de la propriété y de l'instance
  this.toto(); // appelle la fonction toto de l'instance
}

Contrairement aux langages de POOProgrammation Orientée Objet classiques, une fonction javascript peut "appartenir" à plusieurs objets. Et donc être appelée dans des contextes d'instances différents, on peu utiliser apply et call pour réaliser ça.

function getHtmlColor() {
  return "#" + this.couleur;
}

function Voiture(code_couleur) {
  this.couleur = code_couleur;
}

function Rectangle(larg, haut, rgb) {
  this.couleur = rgb;
  this.largeur = larg;
  this.hauteur = haut;
}

var v = new Voiture('ccff33');
var r = new Rectangle(10, 12, 'ff0033');

alert( getHtmlColor.apply(v) ); // affiche #ccff33
alert( getHtmlColor.apply(r) ); // affiche #ff0033
 

La fonction getHtmlColor fait usage de l'opérateur this qui lui permet d'accéder à la propriété couleur de l'instance. L'instance concernée correspond à la variable v ou r donnée comme paramètre de apply.

apply et call fonctionnent de la même manière à une différence. La manière de passer les paramètres à la fonction appelée. apply attend deux paramètres, le premier étant une référence à l'instance, le deuxième étant un tableau contenant les arguments. call attend au moins un paramètre (celui de l'instance) et propage les paramètres reçus en excédent à la fonction appelée.

une_fonction.apply(instance, tableau);
une_fonction.call(instance, p1, p2, p3, ...);
Editer