Programmation objet classique en Javascript

Bonjour,

Je rencontre souvent le m�me probl�me en javascript :
Je cr�er des objets comportant des m�thodes appel�es par �v�nement. Sauf que dans ces m�thode, je ne peux plus acc�der � mes variables de classe.

Exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var MarqueurOH = function(params_id, params_data) { //Initialisation de l'objet : MarqueurOH.initialized = false;   //Initialisation des fonctions : function toggleInfoWindow(event) { //Impossible d'aceder à cette variable : this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! }   //Initialisation des variables de classe : this.id = id; this.data = data; this.marqueur = new google.maps.Marker({});   //event : google.maps.event.addListener(marqueur, 'click', toggleInfoWindow);   //L'objet est initialisé, les fonctions ne seront pas recréées pour chaque instances : MarqueurOH.initialized = true; }

---

J'ai donc cherch� et trouv� ce tutoriel que je n'ai pas encore lu :
http://t-templier.developpez.com/tut...vascript-poo3/
http://t-templier.developpez.com/tut...vascript-poo2/
http://t-templier.developpez.com/tut...vascript-poo1/

Croyez vous qu'il r�solve mes probl�mes ?
Existe il une librairie qui permette de cr�er des objets fonctionnel m�me dans les cas d'appel de fonction �v�nement ? Je crois qu'en cr�ant un plugin jquery, je r�soudrai mes probl�mes, mais bon je ne veux pas forcement que l'objet soit associ� � un �l�ment du dom...


Merci d'avance :ccool:

Salut

Alors, je veux pas dire de connerie :aie:

Code:

---

1 2 3 4 5

function toggleInfoWindow(event) { //Impossible d'aceder à cette variable : this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! }

---

this.marqueur d�signerait toggleInfoWindow.marqueur si je ne m'abuse (et si cela existait) mais il te faut acc�der au parent, du style :

Code:

---

1 2 3 4 5

function toggleInfoWindow(event) { parent.marqueur }

---

Mais je ne connais pas le mot clef exact, je vais cherchais...

Bon d'accord, je t'ai pas beaucoup aider l� :D mais sait on jamais, peut-�tre que ma logique est bonne et qu'un forumeur va expliciter...

C'est l'id�e, mais malheureusement ce n'est pas possible en javascript.
A moins de simuler cet aspect "programmation objet pure" en lisant le tuto. Mais en fait je me demandais surtout, est ce que ce tuto r�sout exactement ce dont je cherche � faire, c'est � dire acc�der � un objet membre dans une fonction evenement !?

Le probl�me vient du fait que tu passes ta fonction "toggleInfoWindow" � un event et elle sera donc appel�e de fa�on isol�e sans l'objet sur lequel elle devrait �tre appel�e :

un peu comme :
MarqueurOH.toggleInfoWindow(); // this == toggleInfoWindow
var f = MarqueurOH.toggleInfoWindow;
f(); // this == window (puisque non sp�cifi� -> aucun point (.) devant la fonction

Une des 2 solutions vient donc � encapsuler l'objet dans une closure (les librairies utilisent en g�n�ral une fonction "bind" pour faire �a il me semble) :

Code:

---

1 2	//event : google.maps.event.addListener(marqueur, 'click',function(){ MarqueurOH.toggleInfoWindow(); });

---

l'autre solution, c'est de stocker une r�f�rence au "this" dans la d�finition de l'objet, ainsi dans les fonctions (d�clar�e dans ce contexte) pourront y acc�der m�me si leurs "this" valent autre chose :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var MarqueurOH = function(params_id, params_data) { //Sauvegarde de l'objet : var that = this;   //Initialisation de l'objet : MarqueurOH.initialized = false;   //Initialisation des fonctions : function toggleInfoWindow(event) { //récupération de l'objet principale via une référence. that.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } //.... }

---

+1 pour Will : le plus simple est de sauvegarder le contexte.

jQuery et Prototype, entre autres, proposent des m�thodes pour conserver le contexte lorsqu'on attache un �v�nement, mais je n'ai pas l'impression que l'API Google Maps ait quelque chose dans ce go�t-l�. Dans la doc, il est conseill� d'utiliser les closures, ce qui rejoint la remarque de Will. Apr�s, je ne connais pas vraiment cette API, donc peut-�tre que je me trompe...

Edit: lorsqu'un gestionnaire d'�v�nement est d�clench�, this d�signe l'�l�ment DOM sur lequel ce gestionnaire a �t� attach�. Dans le cas pr�sent, il semblerait que ce soit le marqueur en question. Si c'est vrai, �a nous simplifie la vie :ccool:

Citation:

---

Envoy� par Soap17

Bonjour,

Je rencontre souvent le m�me probl�me en javascript :
Je cr�er des objets comportant des m�thodes appel�es par �v�nement. Sauf que dans ces m�thode, je ne peux plus acc�der � mes variables de classe.

Exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var MarqueurOH = function(params_id, params_data) { //Initialisation de l'objet : MarqueurOH.initialized = false;   //Initialisation des fonctions : function toggleInfoWindow(event) { //Impossible d'aceder à cette variable : this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! }   //Initialisation des variables de classe : this.id = id; this.data = data; this.marqueur = new google.maps.Marker({});   //event : google.maps.event.addListener(marqueur, 'click', toggleInfoWindow);   //L'objet est initialisé, les fonctions ne seront pas recréées pour chaque instances : MarqueurOH.initialized = true; }

---

J'ai donc cherch� et trouv� ce tutoriel que je n'ai pas encore lu :
http://t-templier.developpez.com/tut...vascript-poo3/
http://t-templier.developpez.com/tut...vascript-poo2/
http://t-templier.developpez.com/tut...vascript-poo1/

Croyez vous qu'il r�solve mes probl�mes ?
Existe il une librairie qui permette de cr�er des objets fonctionnel m�me dans les cas d'appel de fonction �v�nement ? Je crois qu'en cr�ant un plugin jquery, je r�soudrai mes probl�mes, mais bon je ne veux pas forcement que l'objet soit associ� � un �l�ment du dom...


Merci d'avance :ccool:

---

encore une fois javascript n'est pas un langage � base de classe mais de prototype.

enfin tout comme dans les langages � base de classe this s'applique � l'objet courant et non pas � un quelconque truc d�finit on ne sais o�.

lorsqu'on passe � un listener une r�f�rence � une fonction (javascript emploi � bon escient le mot fonction l� ou java et C++ en abuse et devrait utilise rm�thode) il passe la fonction et que la fonction
celle-ci s'appliquera donc � l'objet this activ� par le listener

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

monObj = { foo: function() { this.a = 45; }, a: 105 }   bouton = document.getElementById('btn') bouton.onclick=monObj.foo; console.log(monObj.a); // => 105 console.log(bouton.a); // => undefined   //click sur le bouton btn console.log(monObj.a); // => 105 console.log(bouton.a); // => 45

---

On n'a pass� qu'une r�f�rence � foo et non pas l'objet monObj

appeler monObj.foo() dans la le listeneur du bouton il faut faire

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

monObj = { foo: function() { this.a = 45; }, a: 105 }   bouton = document.getElementById('btn') bouton.onclick= function () {monObj.foo();}; console.log(monObj.a); // => 105 console.log(bouton..a); // => undefined   //click sur le bouton btn console.log(monObj.a); // => 45 console.log(bouton.a); // => undefined

---

ou encore

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

monObjConstructor = function () { this.foo= function() { this.a = 45; }; this.a= 105; var me = this; document.getElementById('btn').onclick= function () { me.foo(); }; }   monObj = new monObjConstructor (); console.log(monObj.a); // => 105 console.log(bouton..a); // => undefined   //click sur le bouton btn console.log(monObj.a); // => 45 console.log(bouton.a); // => undefined

---

A+JYT

Merci � tous pour votre aide.
Le "var me = this;" me plait :ccool: