TutoJS : Comprendre Apply() - Call() et Bind()

Dans ce court tutoriel nous verrons les différences entre les méthodes apply, call et bind.

Prérequis :

• comprendre le context et this
• comprendre les objets javascript

Apply()

La méthode Apply() : apply( thisValue, [argumentArray] ) appelle une fonction en lui passant une valeur this et des arguments sous forme d'un tableau (ou d'un objet semblable à un tableau).

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);

console.log(max);

Return = la valeur de retour de la fonction appelé

Call()

La méthode call(): call(thisValue, arg1, arg2...) réalise un appel à une fonction avec une valeur this donnée et des arguments fournis individuellement.

C'est comme la méthode apply mais avec des arguments à la suite plutôt que sous la forme d'un tableau

var max = Math.max.call(null, 5, 6, 2, 3, 7);

console.log(max);

Return = la valeur de retour de la fonction appelé

Bind()

La fonction bind() : function.bind(thisValue, arg1, arg2...) crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte this la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

Return = une copie de la fonction fournie avec la valeur this indiquée et les arguments initiaux fournis.

ps: Bind() n'appelle pas la fonction.

Conclusion

Apply(this, array) et Call(this, arg1...) on le même objectif: appelé une fonction en passant la valeur de this et les arguments voulu.

fct.bind(this, arg1...) de son côté se contente de créer une copie de la fonction sans l'appeler.

Ressources complémentaires :

• Article de blog de JavascriptIsSexy