Discussion :

[SpaceFrog]

Bon j'ouvre un topic à part pour ceci car bien que derivant d'un autre post ça risque de polluer l'autre thread qui est resolu ...

La problèmatique passer une serie d'argument optionnels d'une fonction à une autre. Le coeur du problème est la creation de la liste d'arguments :

Un petit exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
function foo(){
for(i=0;i<arguments.length;i++){alert(arguments[i]);}
}
 
function bar(){
foo(arguments)
	}
 
bar('foo','je suis','là')
</script>

mais bien entendu cela ne fonctionne pas
comment concaténer la liste des arguments à passer à la seconde fonction ?

[marcha]

Salut,

avec apply ça doit le faire.

Code :

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

1
2
3
4
 
function bar(){
	foo.apply(this, arguments)
}

[SpaceFrog]

en javascript apply ????

la fonction n'est pas appelée ...

[marcha]

Euh oui en javascript.

apply

[marcha]

Ce code fonctionne chez moi (FF2)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function foo(){
for(i=0;i<arguments.length;i++){alert(arguments[i]);}
}
 
function bar(){
	foo.apply(this, arguments)
}
 
bar('foo','je suis','là');

[SpaceFrog]

j'en decouvre tous les jours avec javascript ...
par contre je ne comprend pas le premier argument de la fonction .
this ??? représente quoi ?

[marcha]

Le premier argument permet de donner une référence
qui sera accessible par l'opérateur this dans la fonction.

un petit exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var a = { toto: 'coucou' };
var b = { toto: 'salut' };
 
function showToto(param1, param2) {
  alert(this.toto + ' ' + param1 + ' ' + param2);
}
 
showToto.apply(a, ['p1', 'p2']);
showToto.apply(b, ['p3', 'p4']);

dans ton exemple, j'ai mis this pour conserver le même contexte de this

[SpaceFrog]

oki merci marcha !

en fait c'est puisssant ce truc là

[le_chomeur]

n'ai pô tout compris , l'intérèt ?
plutôt que d'utiliser un hash ?

[SpaceFrog]

Non moi non plus fillot ^^

Je cherchais juste à lancer dynamiquement une fonction en lui passant des arguments au travers d'une autre fonction

[DoubleU]

L'intérêt de apply, comme l'a souligné marcha, c'est qu'elle te permet de spécifier le contexte d'exécution (le this) de ta nouvelle fonction. C'est utile quand tu veux définir un callback par exemple:

Code :

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

1
2
3
4
5
6
obj = { name: "obj"};
document.body.onclick = function(){
    return function(){
        console.log(this.name)
    }.apply(obj)
}

Si tu n'en as pas besoin, un simple hash fera probablement mieux l'affaire.

[le_chomeur]

ou pt plus simplement si l'on doit faire un appel récursif sur un objet , ou passage de paramètre par référence :

Code :

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

1
2
3
4
5
6
7
8
9
 
function toto(){
//Propriété
this.moi = "je suis pas mal";
 
//appel autre méthode
var moi = this;
autreFonction(moi);
}

[marcha]

@le_chomeur J'ai essayé de présenter un exemple "académique" et le hash était une solution simple.

Deux cas de figure pour illustrer l'intérêt de l'argument 'this' dans apply

1er exemple

Lors de la gestion d'évènements le this représente généralement l'élément
DOM concerné par l'évènement. Il est parfois pratique de créer une instance d'un
objet javascript par élément DOM pour gérer certaines chose.

Un exemple simplifié basé sur Prototype

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
 
var Button = Class.create();
 
Button.prototype = {
	count: 0,
	initialize: function(e) {
		Event.observe(e, 'click', this.handleClick.bindAsEventListener(this));
	},
 
	handleClick: function(event) {
            this.count++;
	}
}
 
new Button($('button1'));
new Button($('button2'));

Dans cette exemple, on aimerait que handleClick puisse avoir une référence
sur sa propre instance grace à this et non sur l'élément DOM ceci pour avoir
un accès à la variable membre count par this.count

C'est possible grace à apply, ici géré en interne par Prototype dans bindAsEventListener(this)

Autre exemple:

Pour reprendre l'exemple de SpaceFrog dans ce post

Code :

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

1
2
3
4
5
6
 
function bar(funct){
  var Arguments=new Array();
  for(i=1;i<arguments.length;i++){Arguments.push(arguments[i])}
  window[funct].apply(this,Arguments )
}

arguments n'étant pas une instance de Array, SpaceFrog a du reconstruire
un tableau en itérant les arguments.

Grâce a apply on peut faire appel à des fonctions dans les prototypes d'objets
existants en leur donnant un context this différent

La fonction de SpaceFrog aurait pu s'écrire ainsi

Code :

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

1
2
3
4
 
function bar(funct){
  window[funct].apply(this,  Array.prototype.slice.apply(arguments,[1]));
}

Ici on utilise Array.slice pour éjecter le premier élément des arguments
et reconstruire par la même occasion un vrai objet Array.

c'est possibile parce que slice utilise en interne des méthodes pour manipuler
son 'tableau' qui sont aussi existantes dans arguments.

[SpaceFrog]

justement j'ai essayé d'appliquer des methodes d'array à arguments avec
shift() pour virer le premier mais il me dit cet objet ne supporte pas cette methode ...
J'en conclus que arguments n'est pas un array a proprement parler

[Bovino]

Effectivement, arguments est du type Object. A part length, il ne possède donc pas les méthodes propres aux Array.

EDIT : Par prévention, je préfère préciser tout de suite que je sais qu'un typeof sur un Array renvoie Object, mais dans le cas de arguments, il s'agit réellement d'un type Object et pas Array.

[Auteur]

arguments est un tableau d'objets :

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
function foo()
{
  var i, j;
 
  for(i=0; i<arguments[0].length; i++) // arguments de foo()
  {
    for (j=0; j<arguments[i].length; j++)
      alert(arguments[i][j]);   // arguments de bar()
  }
 
}
 
function bar()
{   
  foo(arguments);
}
 
bar('foo','je suis','là')

[marcha]

J'en conclus que arguments n'est pas un array a proprement parler

En effet, dans la spec de MDC ils appellent ça un objet Array Like :-) c'est mignon

Sinon il y a un exemple dans la page pour facilement convertir arguments en Array
en utilisant call

[SpaceFrog]

Auteur essaye de faire un join ou un plop sur arguments

Merci marche je jette un oeil sur call ...

[le_chomeur]

okip marcha j'ai compris le principe ...

on utilise apply pour travailler sur l'objet lui même et non sur sa référence dom

[marcha]

arguments est un tableau d'objets :

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
function foo()
{
  var i, j;
 
  for(i=0; i<arguments[0].length; i++) // arguments de foo()
  {
    for (j=0; j<arguments[i].length; j++)
      alert(arguments[i][j]);   // arguments de bar()
  }
 
}
 
function bar()
{   
  foo(arguments);
}
 
bar('foo','je suis','là')

Là je comprends pas Auteur ?