Pointeur this et événement OnClick

Version imprimable

Salut tous le monde.

J'ai besoin de votre aide. Je me met à la POO en JS et j'ai un petit soucis, je m'explique. Je crée une instance de ma classe au début de la page. Ensuite, au clique sur un lien j'appelle 2 fonctions de cette instance, sans soucis tout fonctionne.
Par contre dans ma fonction ScreenImage, j'associe la fonction CloseGalery de l'objet courant (this) à un lien. A l'usage quand je clique sur ce lien, la fonction CloseGalery est belle-et bien lancé mais this ne pointe pas sur mon instance de classe, mais sur ma page. Du coup tout les attributs (ceux définit das ma ImageGalery tel que CurrentImageIndex ) que je souhaite utiliser dans CloseGalery son undefined

Je précise que le code ci-dessous, est totalement épuré. L'idée étant de créer une classe qui permettra de gérer un affichage d'image. Je n'ai pas tout mis le code pour alléger le poste et que ça soit plus clair.

Ma clase ImageGalery
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 function ImageGalery(p_ImageTable) { //Propriété this.ImageTable = p_ImageTable; this.CurrentImageIndex = 0; this.BackgroundDiv = null; this.ScreenBackground = function() { } this.ScreenImage = function(ImageIndex) { this.LinkClose = document.createElement('A'); this.LinkClose.onclick = this.CloseGalery; } this.CloseGalery = function() { alert("this de type ImageGalery : " + (this instanceof ImageGalery)); // Affiche FALSE } }
Code de création de mon instance.
Code:

1 2 3 4 5 6 7 8 var ImageList = new Array(); ImageList[0] = new Array("Upload/aspqvnturspqeft.JPG","Cage Assenseur"); ImageList[1] = new Array("Upload/bpqewkdajghmfkd.JPG","Maison chintoq"); ImageList[2] = new Array("Upload/cuijxyvfkdasxqe.JPG","Batiment rond"); ImageList[3] = new Array("Upload/fklijpqmwclisxh.JPG","Toit"); var MyGalery = new ImageGalery(ImageList);
L'appelle au 2 fonctions qui fonctionne.
Code:

1 2 3 4 <A href="#" onClick="{MyGalery.ScreenBackground();MyGalery.ScreenImage(0);}"> <IMG src="Upload/aspqvnturspqeft.JPG" width=100px height=100px> </A>
J'espère que vous pourrez m'aidé, j'ai essayé de trouvé ma réponse dans les tuto sur la POO en JS, mais en vain.

D'avance merci.

Salut,

Quand tu inscris

Code:

this.LinkClose.onclick = this.CloseGalery;

JS inscrit une référence à la fonction CloseGalery. Or au moment de l'événement click le this contenu dans CloseGalery fait référence à l'élément qui l'a déclenché, ici ta balise A. Il faut donc garder une référence sur ta class si tu veux éviter cet écueil:
Code:

1 2 3 4 5 6 7 this.ScreenImage = function(ImageIndex) { this.LinkClose = document.createElement('A'); var self=this; this.LinkClose.onclick = function () { self.CloseGalery() }; }
Ainsi quand CloseGalery est appelé il l'est dans le contexte du self, soit la référence de ta class.

ERE

Bonsoir.

Ce code fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
 
this.ScreenImage = function(ImageIndex){
	this.LinkClose = document.createElement('a'); 
	var self=this;
	this.LinkClose.onclick = this.CloseGalery(self);
} 
 
this.CloseGalery = function(moi){
	alert("this de type  ImageGalery : " + (moi instanceof ImageGalery)); // Affiche FALSE 
}

@danielhagnoul: le code fonctionne mais est "anti-POO": pourquoi devoir passer à une fonction d'un objet la référence à cet objet ? Le this est là pour ça.
Cela n'a de sens que si la fonction devient indépendante de l'objet et nécessite donc d'obtenir une référence à l'objet pour fonctionner correctement.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 ... this.ScreenImage = function(ImageIndex){ this.LinkClose = document.createElement('a'); var self=this; this.LinkClose.onclick = CloseGalery(self); } //... //définit dans le scope de Window var CloseGalery = function(ctx){ alert("this de type ImageGalery : " + (ctx instanceof ImageGalery)); // Affiche FALSE }
ERE

01/11/2009, 22h41
kimjoa
le js fonctionne comme ça. En js une fonction peut être exécutée dans n'importe qu'elle contexte (ce qui permet une véritable souplesse dans la programmation objet), les références d'une fonction s'applique donc dans le contexte ou on les à référencé.

Quand un passe une fonction comme un arguments d'une autre, on ne passe qu'une référence, et donc elle s'applique au context de l'instance de Function (qui a créer les arguments et la fonction en elle même), elle même étant global(window).

Pour référencer une fonction à un objet, on est obligé de référencé le context dans une variable (visible par la fonction)

(note : les variables dont les fonctions on accès sont celles des contextes de la création de la fonction, ces contextes ne sont pas des objets mais des contextes de fonction, par exemple si je déclare une fonction dans une autre, alors cette dernière aura accès qu'au variable de la fonction qui la crée (récursivement ...), et le context globale window )
Code:

1 2 3 4 5 6 function mafonctionàliée(){....} var context = this; var mafonctionliée= function(){ return mafonctionàliée.apply(this, arguments); }
tu peux aussi faire une recherche sur bind en javascript, tu aura pas mal de fonction se basant sur le même principe.

voilà bye

Bonsoir

C'était en réaction, un peu trop rapide peut-être :?, à :

Citation:

Envoyé par emmanuel.remy

Code:

1
2
3
4
5
6
7
 
    this.ScreenImage = function(ImageIndex) 
    {
      this.LinkClose              = document.createElement('A'); 
      var self=this;
      this.LinkClose.onclick    =  function () { self.CloseGalery() }; 
    }

ERE

qui ne fonctionne pas.

01/11/2009, 23h31
Argonz
Merci à tous pour vos réponse, parce que maintenant mon code fonctionne :P.

J'aimerais comprendre deux choses :
Code:

1 2 3 var Self = this; this.LinkClose.onclick = function () { Self.CloseGalery() };
Je ne vois pas bien pourquoi on doit repréciser le function () {XXXX} pour faire l'assignation. Le type est déjà définit avant lors de la "création" de la fonction.

Pour ce qui est de l'usage du mot this. Pourquoi ne peut on pas directement assigné la référence de la fonction de cette manière :
Code:

1 2 this.LinkClose.onclick = function () { this.CloseGalery() };
Y a un truc qui m'échappe. Et comme j'aime bien comprendre tout ce que je fais (ce qui énerve un peu ma copine des fois d'ailleurs) je profite encore de votre bonté.

@danielhagnoul: bien sûr que si cela fonctionne ! Va falloir revoir ton javascript ! :lol:

Et voilà le code testé (sur une balise P, et pas A, mais cela ne change rien):

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
 
 
  <script type="text/javascript">
  function ImageGalery(p_ImageTable)
    {   
      //Propriété 
      this.ImageTable           = p_ImageTable;   
      this.CurrentImageIndex    = 0;
      this.BackgroundDiv        = null;
 
      this.ScreenBackground = function()
      {
 
      }
 
      this.ScreenImage = function(ImageIndex) 
      {
        this.LinkClose = document.createElement('P');
        this.LinkClose.appendChild(document.createTextNode("Cliquez ici !"));
        document.getElementsByTagName("BODY")[0].appendChild(this.LinkClose);
        var self = this;
        this.LinkClose.onclick    =  function () { self.CloseGalery() };     
      } 
 
      this.CloseGalery = function()
      {
        alert("this de type  ImageGalery : " + (this instanceof ImageGalery)); // Affiche FALSE -> plus maintenant !
        console.log(this); 
      }
 
    }
 
  var MyGalery; 
  function addGalery() {
        var ImageList = new Array();
        ImageList[0] = new Array("Upload/aspqvnturspqeft.JPG","Cage Assenseur");
 
        MyGalery = new ImageGalery(ImageList);
        MyGalery.ScreenImage(0);
  }
  </script>
 
  </head>
  <body onload="addGalery();">
 
  </body>
</html>

et si tu ne veux pas passer par le self, tu peux aussi écrire (je trouve cela plus compliquer pour un début, mais bon...):

Code:

this.LinkClose.onclick = (function (ctx) { return function () { ctx.CloseGalery();};})(this);

ERE

01/11/2009, 23h37
emmanuel.remy
Citation:
Envoyé par Seboubou86

(...)
Pour ce qui est de l'usage du mot this. Pourquoi ne peut on pas directement assigné la référence de la fonction de cette manière :

Code:

1 2 this.LinkClose.onclick = function () { this.CloseGalery() };

Y a un truc qui m'échappe. Et comme j'aime bien comprendre tout ce que je fais (ce qui énerve un peu ma copine des fois d'ailleurs) je profite encore de votre bonté.
Le this est résolu lors de l'appel de la fonction, selon le contexte (scope). Donc si tu assignes ainsi la fonction le this vaudra ton LinkClose, soit ton élément qui génère le clic.

ERE
02/11/2009, 00h07
Argonz

Ok je comprend mieux l'usage du Self. En gros on recrée une fonction qui appellera la fonction dans l'objet voulut.

Merci encore pour toutes ces réponses aussi rapides !!!
02/11/2009, 11h32
danielhagnoul

Citation:

Envoyé par emmanuel.remy

@danielhagnoul: bien sûr que si cela fonctionne ! Va falloir revoir ton javascript ! :lol:

ERE

Aujourd'hui vous avez raison , mais hier rien ne marchait, ni avec Firefox (Firebug me donnait des indications différentes d'aujourd'hui), ni avec Chrome, ni avec IE8 !:bebe:

Mais lorsque j'ai éteint mon ordinateur, j'ai eu droit à un dialogue d'alerte : « l'instruction XXX ne peut pas être read » ce qui m'a fortement intrigué et décidé à rejouer la partie aujourd'hui. :aie:

Si ce n'est pas un rayon cosmique qui a perturbé les électrons du CPU, je soupçonne mon logiciel de sécurité qui se met à jour toutes les deux heures.

Lorsqu'il fonctionne l'ordinateur à tendance à se figer et peut-être cela a-t-il une répercussion sur Firebug.

En bref, chez moi, ce qui ne marchait absolument pas hier fonctionne aujourd'hui ! C'est inquiétant ! :calim2:

[EDIT 16/11/2009]

À toute fin utile, je signale que le problème s'est reproduit deux fois.

Je n'ai pas la preuve absolue, mais je pense que c'est Dreamweaver 8 (2005) qui fait des choses étranges, très occasionnellement, lorsque l'ordinateur se fige quelques secondes à cause de la mise à jour du logiciel de sécurité (G Data InternetSecurity 2010).

La dernière en date, lors de la vérification d'une toute petite mise à jour qui concernait toutes les pages d'un site, il n'y avait plus aucun caractère accentué dans le site ! Heureusement, je fais une sauvegarde chaque mardi, la panique a été de courte durée.

Comme je code tout à la main, je ne m'étais pas aperçu que Dreamweaver 8 avait pris de l'âge. J'avais pris des habitudes confortables et c'est avec regret que je dois m'en séparer.

J'ai testé Aptana pendant quelques jours, je le trouve trop lourd et trop lent au démarrage. Je n'arrive pas à prendre mes marques.

Je me suis décidé pour Kopmodo Edit 5.2.2. Je constate qu'il n'y a pas d'espace dédié dans le forum outils. Si quelqu'un lit ceci et connaît un tutoriel ou une documentation en français, je suis très intéressé.

N.B. : le patch français pour Komodo provoque un bug majeur, j'ai dû réinstaller Komodo pour en venir à bout.