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: