[DOM] Transmission d'arguments optionnels entre fonctions

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:

---

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 ?

Salut,

avec apply ça doit le faire.

Code:

---

1 2 3 4

function bar(){ foo.apply(this, arguments) }

---

en javascript apply ????

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

Euh oui en javascript.

apply

Ce code fonctionne chez moi (FF2)

Code:

---

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à');

---

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

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:

---

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

oki merci marcha !

en fait c'est puisssant ce truc là

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

Non moi non plus fillot ^^

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

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:

---

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.

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:

---

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); }

---

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

---

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:

---

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:

---

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.

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

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.

arguments est un tableau d'objets :

Code:

---

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à')

---

Citation:

---

Envoyé par SpaceFrog

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

Auteur essaye de faire un join ou un plop sur arguments ;)

Merci marche je jette un oeil sur call ...

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

Citation:

---

Envoyé par Auteur

arguments est un tableau d'objets :

Code:

---

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 ?

arg j'ai vraiment du mal avec ce que j'appelle de la syntaxe POO like ;)

marcha j'arrive pas avec call :(

Citation:

---

Envoyé par SpaceFrog

marcha j'arrive pas avec call :(

---

Tu as un bout de code ?

Citation:

---

Envoyé par marcha

Là je comprends pas Auteur ?

---

les arguments de bar() sont dans arguments[0]

Citation:

---

Envoyé par SpaceFrog

arg j'ai vraiment du mal avec ce que j'appelle de la syntaxe POO like ;)

marcha j'arrive pas avec call :(

---

call friend :mouarf::mouarf::mouarf:

Citation:

---

Envoyé par Auteur

les arguments de bar() sont dans arguments[0]

---

Heu.... pas chez moi :-)

arguments[0] c'est le premier argument de foo, arguments[1] le seconds,
tu peux tester en appelant directement foo('a', false) par exemple.

arguments[0] sera égal à 'a'
et arguments[1] à false

Citation:

---

Envoyé par marcha

Heu.... pas chez moi :-)

arguments[0] c'est le premier argument de foo, arguments[1] le seconds,
tu peux tester en appelant directement foo('a', false) par exemple.

arguments[0] sera égal à 'a'
et arguments[1] à false

---

ce n'est pas le problème évoqué dans ce sujet....

Auteur je crois que tu as un wagon de retard ^^

je ne passer pas un array en argument à la fonction ...


Marcha j'arrive toujours pas à basculer les arguments dans un array avec call :cry:

Ainsi, ça fonctionne chez moi pour convertir arguments en Array

Code:

---

1 2	var args = Array.prototype.slice.call(arguments);

---

j'ai vraiment pas la fibre POO
Sans convictin aucune parceque ça n'a aucun sens :

Code:

---

1 2 3 4 5

function bell(){ var Tab = Array.prototype.slice.call(arguments); alert(Tab) } bell(1,2,3,4,5)

---

je ne vois vraiment pas comment l'appliquer

Citation:

---

Envoyé par SpaceFrog

je ne vois vraiment pas comment l'appliquer

---

Je comprends pas ce que tu veux dire par "je ne vois pas comment l'appliquer" ?
ton code fonctionne pourtant ?

heu non pas chez moi ... il en se passe rien ...

Compris !!!!

ça passe pas sous IE ...
ça passe sous FFX

Ok.

Bon j'avais parlé de l'exemple d'apply avec Array.slice uniquement pour
répondre à le_chomeur et avoir un autre exemple d'utilisation.

Maintenant je pense qu'on devrait se limiter à ce genre d'appels que sur
du code que l'on connait.

on ne sait pas comment Array.slice est codé dans les différents navigateurs.
Je sais que l'objet arguments ressemble à un tableau dans le sens où il a
une propriété length et que chaque élément est accessible par son index.

mais si une implémentation de Array.slice ne se limite pas à l'utilisation
sticte de ce que l'objet arguments offre, ça plante.

Je serais pas étonné que sous IE Array.slice fasse appel à d'autres méthodes
interne de Array, par exemple Array.shift et Array.pop pour sortir des
éléments avant et après ceux qui doivent subsister après le slice.

Dans ce cas, si this représente une instance d'arguments, this.pop ou this.shift n'existent pas.

Citation:

---

Envoyé par SpaceFrog

Auteur je crois que tu as un wagon de retard ^^

---

ok, je mets le wagon dans une voie de garage et j'attends le prochain train...