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

**dragonfly** · 16/10/2007, 12h32

Bonjour à tous,

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

Voici ma classe :

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
 
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 :

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

1
2
 
var souri = new souris();

L'appel a ma fonction souris se fait ainsi:

Code :

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

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

**Djakisback** · 16/10/2007, 18h41

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 :

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

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

**denisC** · 16/10/2007, 20h45

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

**Djakisback** · 16/10/2007, 22h23

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.

**Shinuza** · 17/10/2007, 00h04

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

Code :

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

1
2
3
4
5
6
Function.prototype.bind = function(objet) { 
    var self = this;
    return function() { 
        return self.apply(objet, arguments); 
    } 
}

**Djakisback** · 17/10/2007, 09h39

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

**dragonfly** · 17/10/2007, 09h56

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 :

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
 
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...

**Shinuza** · 17/10/2007, 14h50

Code :

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

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

**dragonfly** · 17/10/2007, 15h32

Envoyé par Shinuza

Code :

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

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

C'est sans doute la nostalgie

Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche

**Shinuza** · 17/10/2007, 15h42

Envoyé par dragonfly

C'est sans doute la nostalgie

Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche

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

**dragonfly** · 18/10/2007, 09h11

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)

**Shinuza** · 18/10/2007, 12h25

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

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

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?

**dragonfly** · 19/10/2007, 09h48

En fait dans ce code

Code :

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

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

**Djakisback** · 19/10/2007, 10h10

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 :

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
// 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)

**Shinuza** · 19/10/2007, 11h43

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;

**dragonfly** · 28/11/2007, 11h24

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 :

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
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

**dragonfly** · 29/11/2007, 10h04

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 :

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
 
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 Shinuza

et ca fonctionne pas

**Djakisback** · 29/11/2007, 11h38

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.

**dragonfly** · 29/11/2007, 12h11

Forcément (suis-je bête

), je l'ai mis ailleurs j'ai créé un objet souris

Code :

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

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...