Utilité des méthodes call / apply

Version imprimable

05/01/2011, 02h20
chok371

Utilité des méthodes call / apply
Bonjour,

Je viens de mettre 2h à comprendre comment utiliser call / apply :aie:, maintenant j'aimerais comprendre pourquoi les utilisés.

Sur ce script je me sert de call pour donner une valeur à la propriété "attribut" :
Code:

1 2 3 4 5 6 7 8 9 function testF () { alert("attribut : " + this.attribut); } var obj1 = { attribut : "la valeur", } testF.call(obj1);
Je peux faire la même chose sans call :
Code:

1 2 3 4 5 6 7 8 9 10 function testF () { alert("attribut : " + this.attribut); } var obj1 = { attribut : "la valeur", methode : testF } obj1.methode();
Alors j'aimerais savoir ce que la méthode call apporte de plus.

Merci.
05/01/2011, 07h29
Willpower
Citation:
Envoyé par chok371

Bonjour,

Je viens de mettre 2h à comprendre comment utiliser call / apply :aie:, maintenant j'aimerais comprendre pourquoi les utilisés.

Sur ce script je me sert de call pour donner une valeur à la propriété "attribut" :

Code:

1 2 3 4 5 6 7 8 9 function testF () { alert("attribut : " + this.attribut); } var obj1 = { attribut : "la valeur", } testF.call(obj1);

Je peux faire la même chose sans call :

Code:

1 2 3 4 5 6 7 8 9 10 function testF () { alert("attribut : " + this.attribut); } var obj1 = { attribut : "la valeur", methode : testF } obj1.methode();

Alors j'aimerais savoir ce que la méthode call apporte de plus.

Merci.
Ici dans tes exemple tu appelles d abord là fonction définie globalement que tu appliques sur l objet 1 ensuite dans ton 2eme exemple tu appelles là référence à cette fonction définie dans l objet.

Maintenant suppose que la fonction ne soit pas définie globalement mais uniquement dans un type d objets. Exemple :
Code:

1 2 3 function CreerA(){ this.setName = function(name){this.name=name;} ; } var a = new CreerA(); var b = {};
Ici la fonction setName n'est définie que dans l objet "a" et donc pas accessible par les autres objets comme l objet vide "b".

Donc tu peux faire :

Code:

a.setName("john");

Mais pas

Code:

b.setName("marie");

Par contre tu peux le faire mais en passant par l objet a :

Code:

a.setName.call(b,"marie");

:-)
05/01/2011, 08h44
Bovino

Concrètement, ces méthodes permettent de forcer la valeur de this.
05/01/2011, 15h51
chok371

Willpower : l'objet b n'est alors plus vide ?

Citation:

Envoyé par chok371

Willpower : l'objet b n'est alors plus vide ?

une fois la méthode exécutée, l'objet "b" a en effet son (nouveau) champ "name" qui vaut "marie". mais ne possède toujours pas la méthode "setName".

PS: merci à celui qui a corrigé mon précédent poste. (pas toujours facile de répondre sur GSM^^)

Maintenant, en toute beauté, voici un usage utile du "call" et du "apply" dans une seule ligne de code :
Code:

1 2 if(arguments.length>1) arguments.callee.apply(this,Array.prototype.slice.call(arguments,1));
(placée en début de n'importe quelle méthode, prenant UN unique paramètre par défaut, cette ligne de code génère des appels récursives des cette méthode avec chacun des paramètres supplémentaires).

prenons un exemple.

soit un objet "elem" avec un champ "value" initialisé à 0 et une méthode "add" qui prend un paramètre "v" pour l'ajouter à son "value". rien de plus basique :
Code:

1 2 3 4 5 6 var elem = { value : 0, add : function(v){ this.value+=v; } }
supposons qu'on veuille appeler 3 fois la méthode "add" pour rajouter au 0 initial les valeurs 5, 6 et 7. nous arrivons donc à un total de 18.
Code:

1 2 3 4 elem.add(5); elem.add(6); elem.add(7); alert(elem.value); // 18
beautiful !
maintenant en reprenant cet exemple tout simple, supposons qu'on veut améliorer notre méthode "add" pour qu'elle puisse prendre autant de valeurs qu'elle veut et pour le challenge au lieu d'utiliser une boucle, on préfère utiliser des appels récursifs à elle-même (parce que dans certains cas, ce sera vraiment utile, même si je n'ai pas d'exemple en tête dans l'immédiat^^) :
Code:

1 2 3 4 5 6 7 8 9 10 11 var elem2 = { value : 0, add : function(v){ if(arguments.length>1) this.add.apply(this,Array.prototype.slice.call(arguments,1)); this.value+=v; } } elem2.add(5,6,7); alert(elem2.value); // 18
DES EXPLICATIONS S'IMPOSENT :

Pour un appel récursif, on aurait tendance à vouloir appeler :

Code:

this.add(arguments-1)

("this.add" pouvant être remplacé par "arguments.callee" qui désigne la fonction en cours)

"arguments" étant un tableau contenant nos paramètre, il va falloir le couper après le premier élément pour nos appels récusives :
Pour se faire, la méthode "slice" se porte à merveille ... hors problème, notre "arguments" n'est en réalité pas considéré comme un tableau(Array) mais bien comme un objet(Object). (il suffit de vérifier en tapant "typeof(arguments);" qqe part dans une méthode ... précédé d'un "alert" ou un "document.write").

Bref notre méthode slice ne pouvant être appelée que sur un Array, on va demander explicitement de l'appeler avec notre objet "arguments" grace à la méthode call.

Code:

Array.prototype.slice

ci-dessus : notre méthode "slice" issue du prototype Array

Code:

Array.prototype.slice.call(arguments,1)

ci-dessus : laquelle est explicitement appelée par "arguments" avec la valeur "1" en paramètre.

Ce qui reviendrait à faire :

Code:

Arguments.slice(1)

ce que nos navigateurs refuserait car Arguments n'est pas un Array.(comme dit plus haut.)

Bref, revenons-en à nos moutons,

Code:

this.add(Array.prototype.slice.call(arguments,1))

pourquoi ceci ne suffirait pas ? parce qu'on essaye de passer un tableau un parametre .. notre méthode ne trouverait donc qu'un seul paramètre, cesserait les appels récursives et essayerait de rajouter un tableau de valeurs à sa value "value+=arguments;" plantage assuré !

Il faudrait donc recopier les X valeurs du tableau dans notre appel en les séparant par des virgules ... franchement pas très pratique.

Il existe donc la méthode "apply" pour palier à notre problème, qui elle retransmet un UNIQUE tableau en paramètre :

Code:

this.add.apply(this,...)

Ici on n'utilise le "apply", non par pour modifier l'objet appelant "this" qui serait déjà correct avec le "this.add", on va donc conserver notre "this" en le repassant en premier argument, et donc on utilise le apply simplement pour refourguer notre tableau tronqué d' "arguments" (-1).

bref, on obtient donc bien :

Code:

this.add.apply(this,Array.prototype.slice.call(arguments,1);

En espérant que t'ai RIEN / BIEN compris à mon charabia. ;)

05/01/2011, 21h12
Willpower

Citation:

Envoyé par Bovino

Concrètement, ces méthodes permettent de forcer la valeur de this.

Tout à faire d'accord pour "call", par contre "apply" peut avoir une autre utilité comme le montre mon exemple. ;)

Autre exemple similaire au mien(trouvé sur le net), pour montrer que ça ne sert pas qu'aux appels récursives. ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function factory(fn, /* arg1, arg2, ..., argn */) {
  var obj = new fn(), // Instantiate using 'new' to preserve the prototype chain
      args = Array.prototype.slice.call(arguments, 1); // remove fn argument
  fn.apply(obj, args); // apply the constructor again, with the right arguments
  return obj;
}
 
// Test usage:
function SomeConstructor (foo, bar) {
  this.foo = foo;
  this.bar = bar;
}
SomeConstructor.prototype.test = true;
 
var o = factory(SomeConstructor, 'foo', 'bar');
// will return: Object foo=foo bar=bar test=true, and
o instanceof SomeConstructor; // true

source

05/01/2011, 21h31
chok371

Un peu chaud tout ça :?, mais merci quand même.
05/01/2011, 21h45
Willpower
Citation:

Envoyé par chok371

Un peu chaud tout ça :?, mais merci quand même.

Dis-toi simplement que le "apply" c'est pour retransmettre un appel tel quel à une autre fonction/méthode (ou à elle même) car dans 99% des cas tu passeras soit "arguments" en paramètre soit un tableau tronqué d' "arguments".

Comme par exemple :
Code:

1 2 3 4 5 function machin(){ part1.apply(this,arguments); part2.apply(this,arguments); part3.apply(this,arguments); }
alors que comme l'a dit Bovino, le call sera surtout utilisé pour spécifier/forcer l'objet appelant (le this) d'une méthode/fonction.

Bonjour à tous,

moi je me suis servis de la fonction apply pour centraliser la gestion des exceptions dans mon objet.
au lieu de faire un try catch dans chaque méthode, j'ai créé une méthode qui gère les exceptions et appelle la méthode voulue.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 callFunction : function( sFunction, args ) { try { if( this[sFunction] == null ) throw {message: sFunction + ' n\'est pas une fonction.'}; else this[sFunction].apply( this, args ); }catch(ex){ var sError = '\nErreur'; if( ex.fileName != null ) sError += ' fichier "' + ex.fileName + '" ligne ' + ex.lineNumber; if( ex.message != null ) sError += ' :\n' + ex.message + '\n'; this.logError( sError ); } },
puis

Code:

monObjet.callFunction('maMethode', ...);

je suis pas du tout expert en javascript et j'ai trouvé ça simple et très utile !

joli, beekeep !

sinon, pour le fun, je viens de réécrire les fonctions apply et call.
ça aidera peut-être à mieux les comprendre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Function.prototype.mycall = function(obj){ arg = ""; for(var i=1;i<arguments.length;i++) arg += "arguments["+i+"],"; arg = arg.substring(0, arg.length-1) obj.caller = this; eval("var ret = obj.caller("+arg+")"); return ret; } Function.prototype.myapply = function(obj,argv){ arg = ""; for(var i=0;i<argv.length;i++) arg += "argv["+i+"],"; arg = arg.substring(0, arg.length-1) obj.callee = this; eval("var ret = obj.callee("+arg+")"); return ret; } function alpha(){ this.foo = function(name,age){alert("foo: "+name+age);alert(arguments.callee.caller.caller);}; } function beta(){} var a = new alpha(); var b = new beta(); (function test(){ a.foo.myapply(b,["john",21]); a.foo.mycall(b,"john",21); })();
la sauf différence avec l'original, c'est dans la fonction appelée pour retracer le caller, un simple "arguments.callee.caller" renverra mes fonctions mycall ou myapply, il faudra donc un rajouter un "caller" supplémentaire pour remonter à la vraie fonction appelante : "arguments.callee.caller.caller";

edit: ah oui aussi, internet explorer perd toutes traces du "caller" lors de la fonction "eval" ... donc plus moyen d'appeler du tout les caller sous IE. ;)

13/01/2011, 19h19
Bovino

Citation:

Envoyé par Willpower

"apply" peut avoir une autre utilité comme le montre mon exemple. ;)

Petite précision : la seule différence entre call et apply est la façon de passer les paramètres de la fonction : sous forme d'arguments supplémentaires pour call :

Code:

maFonction.call(valeur_de_this,arg1, arg2, ..., argn);

sous forme de tableau pour apply :

Code:

maFonction.apply(valeur_de_this, [arg1,arg2,...,argn]);

;)

Citation:

Envoyé par Bovino

Petite précision : la seule différence entre call et apply est la façon de passer les paramètres de la fonction : sous forme d'arguments supplémentaires pour call :

Code:

maFonction.call(valeur_de_this,arg1, arg2, ..., argn);

sous forme de tableau pour apply :

Code:

maFonction.apply(valeur_de_this, [arg1,arg2,...,argn]);

;)

Je voulais juste dire que l'usage était en général fort différent, même si les 2 sont souvent utilisés à tord, l'un en lieu de l'autre.

d'ailleurs pour l'exemple de beekeep, c'est bien la fonction "apply" qui convient, mais je l'aurai utilisée un peu différemment de lui :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 callFunction : function( sFunction ) { try { if( this[sFunction] == null ) throw {message: sFunction + ' n\'est pas une fonction.'}; else this[sFunction].apply( this, Array.prototype.slice.call(arguments, 1)); }catch(ex){ // blabla } }
ce qui change, ce sera la façon de l'appeler :

Code:

monObjet.callFunction('maMethode', arg1, arg2, arg3, ...);

au lieu de

Code:

monObjet.callFunction('maMethode', [arg1, arg2, arg3, ...]);

edit: ça ne change pas grand chose, il y aura juste 2 caractères en moins lors des appels (donc peut-être déjà un peu plus lisible) mais surtout pour rester dans mon optique du : apply ne s'utilise qu'avec "arguments" ou une partie d' "arguments". (dans 99% des cas).

Citation:
Envoyé par beekeep
Bonjour à tous,

moi je me suis servis de la fonction apply pour centraliser la gestion des exceptions dans mon objet.
au lieu de faire un try catch dans chaque méthode, j'ai créé une méthode qui gère les exceptions et appelle la méthode voulue.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 callFunction : function( sFunction, args ) { try { if( this[sFunction] == null ) throw {message: sFunction + ' n\'est pas une fonction.'}; else this[sFunction].apply( this, args ); }catch(ex){ var sError = '\nErreur'; if( ex.fileName != null ) sError += ' fichier "' + ex.fileName + '" ligne ' + ex.lineNumber; if( ex.message != null ) sError += ' :\n' + ex.message + '\n'; this.logError( sError ); } },
puis

Code:

monObjet.callFunction('maMethode', ...);

je suis pas du tout expert en javascript et j'ai trouvé ça simple et très utile !
tu m'as inspiré, je viens de réécrire une gestion d'erreurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 handling = function(o){ if(o.__handled) return; // prevent recursives calls from object having himself reference o.__handled = true; for(var i in o){ if(typeof o[i] == "function") o[i] = handling.error(o[i]); if(typeof o[i] == "object") handling(o[i]); } }; handling.error = function(fn){ var newF = function(){ try{return fn.apply(this,arguments);} catch(err){ /* gestionnaire d'erreurs [console ou autres logs]*/ alert(err); } } for(var i in fn) newF[i] = fn[i]; for(var i in fn.prototype) newF.prototype[i] = fn.prototype[i]; newF.original = fn; // if you want to get the original function // newF.prototype.constructor = fn; // else it's your choice return newF; };
puis
Code:

1 2 handling(monObjet); monObjet.maMethode(arg1, arg2, ...); // appel normal
ps: de nouveau faire attention, si t'as un niveau de code avancé qui joue avec les "caller", le caller de tes fonctions devient ma fonction de handling.error et donc pour avoir ton vrai caller, tu dois appeler le caller du caller soit "caller.caller". :zoubi: