Discussion :

[chok371]

Bonjour,

Je viens de mettre 2h à comprendre comment utiliser call / apply , 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Willpower]

Bonjour,

Je viens de mettre 2h à comprendre comment utiliser call / apply , 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

a.setName("john");

Mais pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

b.setName("marie");

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

:-)

[Bovino]

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

[chok371]

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

[Willpower]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.prototype.slice

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Willpower]

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.

[Willpower]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[chok371]

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

[Willpower]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Willpower]

joli, beekeep !

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

"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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sous forme de tableau pour apply :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Willpower]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sous forme de tableau pour apply :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au lieu de

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[Willpower]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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".