[POO] Variable réinitialisée dans une classe

Bonjour à tous,

Je débute en POO javascript et j'ai un soucis que je ne sais pas résoudre.

Voici ma classe :

Code:

---

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

function souris(){ this.top=0; this.left=0; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ if(navigator.appName.substring(0,3) == "Net") //Pour Netscape document.captureEvents(Event.MOUSEMOVE); document.onmousemove = this.position; }   // Fonction permettant de savoir ou se trouve la souris this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }   }

---

je créé un objet souris ainsi

Code:

---

1 2	var souri = new souris();

---

L'appel a ma fonction souris se fait ainsi:

Code:

---

1 2	<img id="circu" onmouseout="var obj = new img("inv"); obj.cache(); " onmouseover="var obj = new img("inv");obj.chgSource("/image/index/circui.jpg"); souri.posSouris();obj.chgPos(souri.top,souri.left); obj.affiche(); " src="/image/index/circu.gif"/>

---

Le probléme s'est que au passage de la souris sur l'image une autre image doit s'afficher ou la souris se trouve mais elle s'affiche en 0;0 (coordonnées par défaut de mon objet souris).

Si lors de "souri.posSouris();" je fais un alert j'ai bien la position de la souris mais quand je passe a la fonction "obj.chgPos... " un alert me renvoi 0;0 soit la position par défaut de ma souris.

Je ne comprends pourquoi les variables se sont réinitialisées...
HELP plz ... MICI

Salut,
en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.
Jette un coup d'oeil du côté d'apply() ou call() pour rétablir ton contexte. Plus d'infos ici.

Vu que dans ton cas il s'agit d'un objet unique, une seule souris par fenêtre, tu pourrais également te débrouiller pour déclarer/accéder globalement à souri dans window, ex (fonctionne IE, FF, moins propre et conflit potentiel de noms de variables) :

Code:

---

1 2 3 4 5 6 7 8 9 10

function souris(){ this.top = 0; this.left = 0; document.onmousemove = function(e){ window.myMouse.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; window.myMouse.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; } window.myMouse = this; } var souri = new souris();

---

D'autre part, quittes à tester le navigateur autant le faire une seule fois plutôt qu'à chaque mouvement de souris, tu peux associer onmousemouve à telle ou telle fonction en fonction de ton test de navigateur.

Bye

Citation:

---

Envoyé par Djakisback

en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.

---

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

Effectivement c'était un peu flou pour moi, merci pour ces précisions.
Dans le premier code posté, les valeurs sont belles et bien stockées dans document.left et document.top.

Citation:

---

Envoyé par denisC

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

---

Javascript permet d'étendre les types :aie:

Code:

---

1 2 3 4 5 6

Function.prototype.bind = function(objet) { var self = this; return function() { return self.apply(objet, arguments); } }

---

Est-ce que quelqu'un pourrait montrer comment faire avec l'exemple du onmousemove au-dessus sans utiliser de fonction bind(), directement avec apply() ?

Re tous,

Merci pour vos réponses,

j'ai compris pourquoi cela ne fonctionne pas mais je n'arrive pas à le mettre en place, j'ai essayé ceci :

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

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ if(navigator.appName.substring(0,3) == "Net") //Pour Netscape document.captureEvents(Event.MOUSEMOVE); document.onmousemove = this.position; }   // Fonction permettant de savoir ou se trouve la souris this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }.bind(this);   }

---

Mais toujours la même chose...

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(event){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); }

---

Je sais pas comment vous arrivez toujours à trouver des scripts des années 60, mais de nos jours on teste les objets pas le nom du navigateur :aie:

Citation:

---

Envoyé par Shinuza

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(e){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); }

---

Je sais pas comment vous arrivez toujours à trouver des scripts des années 60, mais de nos jours on teste les objets pas le nom du navigateur :aie:

---

C'est sans doute la nostalgie :roll:
Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche :lol:

Citation:

---

Envoyé par dragonfly

C'est sans doute la nostalgie :roll:
Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche :lol:

---

Testé par mes soins, par contre j'ai édité une partie du code.

Par contre dans ton code j'ai du remplacer event par e sinon ca me mettait plein d'erreur ^^

Sinon pour ce probléme de this, quelqu'un plz?
Je pige le probléme mais la résolution c'est autre chose (voir quelque message plus haut pour mon dernier code)

Citation:

---

Envoyé par dragonfly

Par contre dans ton code j'ai du remplacer event par e sinon ca me mettait plein d'erreur ^^

---

D'ou le

Citation:

---

Testé par mes soins, par contre j'ai édité une partie du code.

---

Citation:

---

Envoyé par dragonfly

Sinon pour ce probléme de this, quelqu'un plz?
Je pige le probléme mais la résolution c'est autre chose (voir quelque message plus haut pour mon dernier code)

---

Qu'est ce qui te manque?

En fait dans ce code

Code:

---

1 2 3 4 5

this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }.bind(this);

---

le this de this.top et this.left fait reference a l'objet document.onMouseMove et non a mon objet souris, je voudrais qu'il fasse référence à mon objet souris

En fait this faire référence à document et pas à document.onmousemove.

Le problème vient du fait que tu appelles 2 fonctions, ta fonction posSouris est d'ailleurs inutile à mon avis :

Code:

---

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

// Création de la classe function souris(){ this.top = 0; this.left = 0; if(document.attachEvent) { // ou n'importe quel autre test pour tester le navigateur document.onmousemove = function(e){ this.left = event.x + document.body.scrollLeft; this.top = event.y + document.body.scrollTop; }.bind(this); } else if(document.addEventListener) { document.onmousemove = function(e){ this.left = e.pageX; this.top = e.pageY; }.bind(this); } }

---

Je serais curieux de connaître la solution avec les 2 fonctions, car j'ai essayé de binder posSouris mais ca ne fonctionne pas.

Egalement la solution sans créer de fonction bind (cette fonction est imbitable lol)

Bind est tout qu'il y'a de plus efficace et utile, surtout dans une application orienté objet.

Sinon dans le code que j'ai posté, le this relatif au document.onmousemove est relatif à l'objet souris, donc tu peux récupérer les données avec monInstanceDeSouris.left;

Re bonjour tout le monde

Je reviens à la charge aprés avoir attaqué d'autres problémes, j'en reviens a celui-la.

Pour rappel mon code est le suivant:

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

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ document.onmousemove = function(e){ this.left = e.pageX || e.clientX + document.documentElement.scrollLeft; this.top =e.pageY || e.clientY + document.documentElement.scrollTop; }.bind(this); }   // Fonction permettant de donner le left de la souris this.leftSouris = function(){ return this.left; }   // Fonction permettant de donner le top de la souris this.topSouris = function(){ return this.top; }       }

---

et le probléme c'est que quand j'appel la fonction posSouris, je n'obtiens pas les cordonées de la souris dans l'objet (this).
J'ai essayé tout vos codes mais aucun ne marche.
De plus je ne peut pas enlever la fonction posSouris() car elle est appelé lors d'une action précise (passage de la souris sur un TD précis).

Si quelqu'un a une autre idée de comment réglé le probléme, la je déséspére:cry::cry::cry:

Re tous, j'ai viré ma fonction car en fait j'ai remarqué qu'elle me servait a rien (je pensais que les calculs de position ne s'effectuaient tout le temps mais non juste quand je survole mon fameux td).

Donc voila mon code

Code:

---

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

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(e){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); alert(this.left);   ...

---

j'ai mis un alert pour voir et celui-ci me retourne "undefined", la je pige pas j'ai repris exactement le même code que Shinuza8-) et ca fonctionne pas :bug:

Faut le mettre ailleurs dans ta page ton alert car à l'initialisation de l'objet souris this.left est undefined vu que t'as pas encore bougé la souris.

Forcément (suis-je bête:aie:), je l'ai mis ailleurs j'ai créé un objet souris

Code:

---

1 2 3

var souri= new souris(); alert(souri.top+" et "+souri.left);

---

Mais il y'a un probléme, car quand j'enléve le alert se situant dans ma classe souris j'obtiens "undefined et undefined", alors que si je laisse le alert dans ma class, le premier alert (celui de la classe) affiche "undefined" => normal, mais l'autre affiche bien les bonnes valeurs "456 et 512" mais seulement quand je ferme le premier alert avec la souris (quand je le ferme avec la touche entrée, le second m'affiche "undefined et undefined".

Si vous comprenez quelque chose...

C'est le même problème vu que t'as pas encore bougé la souris.
En fait tes valeurs ne sont pas initialisées tant que t'as pas bougé.