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