[POO] Problème lors de l'appel d'une propriété d'un objet.

Version imprimable

Voici un petit bout de code qui est je pense assez clair :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function Souris() {
	this.X = 0;
}
 
var souris = new Souris();
 
souris.Init = function(e) {
	this.X = e.x;
}
 
souris.mousedown = function(e) {
	if (!e) e = window.event;
	alert(e.x);             // Retourne le bon chiffre
	souris.Init(e);        // Initialise l'objet
	alert(this.X);         // Erreur :(
	alert(souris.X); // Bonne valeur
}
 
document.onmousedown = souris.mousedown;

Savez vous pourquoi l'emploi de this ne fonctionne pas dans ce cas précis ?

23/08/2005, 22h47
Strab

Je ne suis pas expert avec le pseudo-objet de javascript, mais je pense que l'emploi de this fait que mousedown est un objet avec une propriété X, comme dans Souris().

Ce n'est qu'une idée...

Strab

this se rapporte à priori à l'objet courant, à savoir la fonction que tu es en train d'ecrire (mousedown par exemple) et non pas l'objet qui est relié à cette méthode. Pour passer outre ce fait, et faire de la POO en JS, il faut utiliser le prototype

A priori, pour faire de l'objet en JS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function Souris() { this.X = 0; } Souris.prototype.Init = function(e) { this.X = e.x; } Souris.prototype.mousedown = function(e) { if (!e) e = window.event; alert(e.x); this.Init(e); alert(this.X); alert(souris.X); } var souris = new Souris(); document.onmousedown = souris.mousedown;
A voir si ça fonctionne mieux comme ça :)

Après vérifications et recherches ne ma part, ça ne fonctionne toujours pas.

Alors, en fait, la programmation objet se fait bien comme je l'ai montré dans mon post précédent, mais il y a des subtilité avec this.... En effet, quand tu fais un

Citation:

document.onmousedown = souris.mousedown;

Il copie ta fonction mousedown dans l'objet document, et donc quand tu fais un this dans la fonction mousedown, cela refere au document, d'où les erreurs....

Et pour en venir a bout:
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 <html> <head> <script type='text/javascript'> function Souris() { this.X = 0; }; Souris.prototype.mousedown = function(e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft; posy = e.clientY + document.body.scrollTop; } alert("position evenement : " + posx); this.setPosition(posx); alert("position this : " + this.X); alert("position souris : " + souris.X); }; Souris.prototype.setPosition = function(posx) { this.X = posx; }; var souris = new Souris(); document.onclick = function(e){souris.mousedown(e)}; </script> </head> <body> <div id='aa'>aaa</div> </body> </html>
(j'ai un peu raffiné le code pour la compatibilité IE/FF)

Donc dans le cas ci dessus, c'est la fonction anonyme qui est affectée à document, et la fonction mousedown reste bien propriété de l'instance souris, de la classe Souris. Et comme ça, tout marche :)