passer une fonction dans un parametre d'une propriété de classe

**CAML** · 05/08/2006, 01h27

Bonjour (oui je sais il est tard mais je trouve pas de solution à mon problème

) ...

bon un petit exemple qui illustre mon problème :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<script type='text/javascript'>
function MyClass(pNom, pPrenom)
{
	this.nom = pNom;
	this.prenom = pPrenom;
}
 
function MyClass.prototype.Test(res)
{
	alert('ok');
	alert(this.nom + " " + this.prenom);
}
 
function MyClass.prototype.appel(f)
{
	alert('appel');
	f();	
}
 
function MyClass.prototype.debut()
{
	this.appel(this.Test);
}
 
</script>
</head>
<body>
<input type="button" value="test" onclick="var o = new MyClass('le nom','le prenom'); o.debut();" />
 
</body>
</html>

explication : je souhaite que lorsque j'appel une methode de ma classe, celle-ci appel une autre méthode en donnant le nom d'une troisieme autre methode (j'espere que vous m'avez comprit sinon suffit de voir les étappes -> debut -> appel -> Test)

bref; ce petit test demontre que ma reference "THIS" perd un peu les pedales lorsqu'il tombe dans la methodes Test.
Du coup, quand je veut faire this.nom et this.prenom il m'affiche "undefined"

(j'imagine que THIS refere document ou un truc dans le genre...)

Cela peut paraitre absurde mais j'ai met raisons; je repete ceci n'est qu'une illustration.

Si quelqu'un peut m'aider à trouver une solution tout en gardant ce principe (methode qui appel une autre methode donner en parametre, le tout dans la meme classe) je vous serai EXTREMEMENT RECONNAISSANT !!!

sur ce; je vais dormir faire plein de cauchemard

**FremyCompany** · 05/08/2006, 12h20

La solution simple (lol, une fois qu'elle est programmée) et efficace est l'auto-storing... Le principe est que ta classe se stocke de manière durable et globale et qu'au lieu de faire référence à this, les fonctions fassent référence à la zone de stockage.
J'ai un code perso unique dans le monde, mais je suis radin (lol)

Sinon, tu as toujours :
A) Eval :

Code :

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

eval("this.Test()")

B) La référence :

Code :

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

1
2
3
function Invoke (ref, funcName) {
    return ref[funcName]();
}

**CAML** · 05/08/2006, 12h36

mmmh, tout d'abord merci de t'interessé a mon problème

Je ne comprend pas tres bien ce que tu fais avec eval() et encore moins ce que fait ta fonction Invoke.
Peut tu m'eclaire par un tout petit exemple complet ?
Merci beaucoup à toi !

**FremyCompany** · 05/08/2006, 12h51

A la volée; devrait afficher deux alerts;

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
19
MyClass = function(name, lastName) {
    this.name=name; this.lastName=lastName;
    this.toString=function() {
         return this.lastName.toUpperCase() + " " + this.name;
    }
    this.alert=function() {
         alert(this.toString());
    }
    this.invoke=function(functionName) {
        eval("this." + functionName + "();")
    }
    this.invokeShared=function(ref, functionName) {
        ref[functionName]();
    }
}
 
MyClassInstance = new MyClass("Francois", "Remy");
MyClassInstance .invoke("alert");
MyClassInstance .invokeShared(MyClassInstance, "alert");

**CAML** · 05/08/2006, 13h40

Je viens de lire, tester et comprendre ton exemple qui est vraiment tres interessant ! merci !
Néanmoins j'ai peur que je sois toujours coincé. Je vois que tu as l'air vraiment bien informé sur le javascript peut etre pourrait tu me dire si mon probleme a une solution !

Voila, je travaille en ASP.NET et j'utilise un composant libre (AJAXPRO) qui me permet de faire des requetes tres facilement sur mon serveur. bref ceci n'est pas tres important...

exemple :

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
19
20
MyClass = function()
{
   this.nom = "LeNom"
   this.prenom = "LePrenom"
 
   this.CallAjax()
   {
      MaMethodePourFaireRequeteAjax(this.nom, this.prenom, this.EndCallBack);
   }
 
   this.EndCallBack(res)
   {
      //traitement de la reponse
     // quand la requete asynchrone se termine, j'arrive ici avec this qui ne pointe plus sur MyClass
     // note: le parametre "res" est en fait la reponse retourner par le serveur
   }
}
 
var monObjet = new MyClass();
monObjet.CallAjax();

Voila le probleme se situe au niveau du this.EndCallBack, je perd toujours la reference de ma classe quand j'arrive dans EndCallBack

j'ai deja essaié au niveau de l'appel de changer

Code :

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

      MaMethodePourFaireRequeteAjax(this.nom, this.prenom, this.EndCallBack);

par

Code :

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

      MaMethodePourFaireRequeteAjax(this.nom, this.prenom, function(res){this.EndCallBack(res, this)});

de sorte a ce que j'envoie la reference mais en fait en reflechissant je fait exactement la meme chose et je ne resoud aucunement le probleme

je ne parviens pas a trouver une solution

tout en gardant l'utilisation de la methode ajax dans une classe

**FremyCompany** · 05/08/2006, 14h19

En utilisant ma méthode d'auto-storing, tu pourrais laisser le code comme présenté, à condition d'effectuer un traitement d'auto-storage...

Seulement, comme je te l'ai dit, ca nécéssite que tu cherche le code par toi même, vu que je n'ai pas trop envie de donner le mien....

Sinon, il existe une methode simple (j'avoue que je ne l'aime pas à cause du fait qu'elle partage des variables entres fonctions sans raison) mais qui a fait ses preuves :

Code :

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

1
2
3
4
5
var This=this; var callBack=function(res) {
    This.Function(res);
}
 
callAJAX(args, callBack);

**CAML** · 05/08/2006, 15h19

mettre la reference this dans une autre variable globale j'y avais penser mais il y a un gros probleme !

dans mon cas c'est un traitement ASYNCHRONE ! donc il se pourait tres bien que dans le traitement du CallBack j'utilise une This global qui a deja été reaffecter par un autre appel ajax !

en tout cas merci pour ton aide ! par hazard aurai tu des articles ou autre sur l'auto storing histoire que je trouve ma solution ? je comprend que tu veuilles garder ton code c'est ton droit

edit : donc au lieu d'utiliser this tu utilises une reference globale ? ces reference globales ont été creer a la creation de l'objet ? mais alors comment pointer sur la bonne reference globale selon l'objet dans leque on se trouve ?

**FremyCompany** · 05/08/2006, 15h58

lol, désolé de m'être fait mal comprendre

Code :

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

1
2
3
4
5
6
7
this.beginAJAX = function () {
    var This=this; var callBack=function(res) { 
        This.Function(res);
    }
 
    callAJAX(args, callBack);
}

**FremyCompany** · 05/08/2006, 16h02

En réponse au reste de ton post :

Envoyé par CAML

en tout cas merci pour ton aide ! par hazard aurai tu des articles ou autre sur l'auto storing histoire que je trouve ma solution ? je comprend que tu veuilles garder ton code c'est ton droit

Lol, c'est moi qui l'ai inventé, donc ca risque d'être difficile...

En fait, je suis occupé de me demander si je vais pas mettre en ligne un tutoriel prochainement... Si jamais je venais à le faire, je te préviendrais...

Envoyé par CAML

edit : donc au lieu d'utiliser this tu utilises une reference globale ? ces reference globales ont été creer a la creation de l'objet ? mais alors comment pointer sur la bonne reference globale selon l'objet dans leque on se trouve ?

C'est la toute l'astuce de l'auto-storing

**CAML** · 05/08/2006, 16h23

une autre question : y a t'il pas un danger sur l'espace memoire utiliser avec cette technique parce que avec le fait de tout mettre en global je m'y perd un peu avec ces passage par reference ou par valeur

sinon je crois que je vais abandonner la methode de travailler avec des CallBack dans des classes

**FremyCompany** · 05/08/2006, 16h59

Avec cette methode la, tu ne mets rien en global...

Envoyé par FremyCompany

lol, désolé de m'être fait mal comprendre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
MyClass=function() {
  // ...
  this.beginAJAX = function () {
      var This=this; var callBack=function(res) { 
          This.Function(res);
       }
 
      callAJAX(args, callBack);
   }
   // ...
}

**CAML** · 05/08/2006, 17h24

Arg tu es trop rapide ! (lol) j'avais pas vu ta premier réponse (sur les deux de suite) !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
MyClass=function() {
  // ...
  this.beginAJAX = function () {
      var This=this; var callBack=function(res) { 
          This.Function(res);
       }
 
      callAJAX(args, callBack);
   }
   // ...
}

avec cela This n'est visible uniquement dans l'objet alors ??? et le seul 'inconvenient' que tu disais c'est que This est partager par toutes les fonction de l'objet ? ou est le probleme a partir du moment ou This n'a uniquement pour but que de stocker la reference this ?

encore merci de ton soutien

**tthierry** · 05/08/2006, 17h28

salut,

j'ai pas regardé le code xhr, mais en me basant sur l'exemple du premier post la fonction call ne serait-elle pas suffisante ?

son premier paramètre permet justement de spécifier la référence voulu.

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
MyClass=function(pNom, pPrenom)
{
	this.nom = pNom;
	this.prenom = pPrenom;
}
 
MyClass.prototype.Test=function(res)
{
	alert('ok');
	alert(res);
	alert(this.nom + " " + this.prenom);
}
 
MyClass.TestS=function(res) {
        alert('ok');
	alert(res);
	alert(this.nom + " " + this.prenom);    
}
 
MyClass.prototype.appel=function(f)
{
	f.call(this,'toto');
}
 
MyClass.prototype.debut=function()
{
    /*
	this.Test.call(this,'totoparam');
	MyClass.TestS.call(this,'totoparam');*/
 
    this.appel(this.Test);
    this.appel(MyClass.TestS);
}

@FremyCompany
préviens moi aussi si tu fais un tuto sur ta méthode, j'ai pas tout compris...

**CAML** · 05/08/2006, 18h26

Bon je confirme cette solution que tu m'a donnée marche bien :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
MyClass=function() {
  // ...
  this.beginAJAX = function () {
      var This=this; var callBack=function(res) { 
          This.Function(res);
       }
 
      callAJAX(args, callBack);
   }
   // ...
}

j'ai tester, la variable This n'est pas global (comme tu me l'as confirmer mais je voulais en etre sur

) Maintenant je voudrais comprendre quel sont les desavantage de cette pratique ? est ce que ce code n'est pas performant ? (gonflage de memoire et tout ca) ?

j'avoue que je ne l'aime pas à cause du fait qu'elle partage des variables entres fonctions sans raison

En fait This est partager pour tout les membres de l'instance de mon objet ?

alors sinon j'ai une dernier petite question

Code :

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

1
2
3
4
5
6
7
8
9
MyClass = function()
{
 
}
 
MyClass.prototype.f1 = function()
{
 
}

Code :

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

1
2
3
4
5
6
7
MyClass = function()
{
    MyClass.prototype.f1 = function()
    {
 
    }
}

j'ai vu ces 2 genre d'ecriture, est ce qu'elle vallent la meme chose ?? personellement je prefere la 2é pour des raison de lisibilité ... neanmoins est ce qu'elle valent la meme chose ???

voila ce sera tout (et tu m'as deja bien aider un grand merci !)

**FremyCompany** · 05/08/2006, 19h31

Lol, tout pareil

Pour le 1er cas, et pour le 2e...

**CAML** · 05/08/2006, 20h05

Oki c'est cool je vais pouvoir continuer à utiliser la 2é methode car je trouve que c'est plus lisible :p

Post résolu, j'espere que cela sera utile à d'autres personnes que moi.

**tthierry** · 05/08/2006, 21h26

faites gaffe quand même lorsque vous utilisez des fermetures, ça peut bouffer des ressources inutilement...

...surtout si vous pensez que cette méthode est mieux pour creer des objets (ce qui n'est pas le cas vu que ça risque d'empêcher le boulôt du gc) :

Code :

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

1
2
3
4
5
6
7
8
 
MyClass = function()
{
    MyClass.prototype.f1 = function()
    {
 
    }
}

sur le principe :

http://jibbering.com/faq/faq_notes/closures.html (complet mais en anglais)
http://developer.mozilla.org/fr/docs..._en_JavaScript (sa traduction mais incomplète)

+

**CAML** · 05/08/2006, 23h30

Il vaut mieux que j'utilise cette methode alors ?

Code :

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

1
2
3
4
5
6
7
8
9
MyClass = function()
{
 
}
 
MyClass.prototype.f1 = function()
{
 
}

**FremyCompany** · 06/08/2006, 12h25

Pour conserver un mode de déclaration interne sans risque d'ambiguité :

Code :

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

1
2
3
4
5
6
7
MyClass = function()
{
    this.f1 = function()
    {

    }
}

**tthierry** · 06/08/2006, 14h24

pour schématiser, placer une fonction à l'intérieur d'une autre revient à créer une fermeture.
celà peut être utile, comme utiliser des ressources pour rien.
moralité -> si on peut s'en passer c'est mieux.

concrètement, ce qui se passe avec cette syntaxe :

Code :

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

1
2
3
4
5
6
7
8
 
MyClass = function()
{
    this.f1 = function()
    {
 
    }
}

- les variables locales du constructeur vivront jusqu'à disparition de l'objet.
- à chaque instanciation les méthodes de la classe appartiennent à l'instance et elle seule (n instance -> n jeux de méthodes en mémoire).

concrètement, ce qui se passe avec cette syntaxe :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
MyClass = function()
{
 
}
 
MyClass.prototype.f1 = function()
{
 
}

- les variables locales du constructeur disparraissent de la mémoire dès la fin de son appel.
- les méthodes de la classe sont partagées pour toutes les instances (n instances -> un seul jeu de méthodes en mémoire).

ps: si je me plante merci de me corriger

passer une fonction dans un parametre d'une propriété de classe

JavaScript

Discussions similaires

Partager

Partager