Méthode de classe sur un onclick : confusion de this !

Version imprimable

21/06/2010, 17h30
Difré91

Méthode de classe sur un onclick : confusion de this !
Salut à tous,

J'ai une classe javscript dans laquelle je stocke des références sur différents éléments du DOM.

J'ai aussi des méthodes de classe.

Je veux associer une méthode de ma classe à un des élement du DOM que je référence, un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 function Toto(id) { this.objet = document.getElementById(id); this.fonction = function() { alert(this.objet.getAttribute('id')); } this.objet.onclick = this.fonction; }
Le problème, c'est que le this de la méthode fonction est une instance de Toto quand on l'utilise dans une autre méthode de Toto, mais il devient l'objet HTML associé par le onclick quand on l'utilise avec onclick.

Et donc, la propriété objet n'existe pas pour l'élement HTML. Et donc je suis bien b**sé.

Il y a t'il un autre mot clé que this qui garantirait que l'on parle de l'instance de Toto ? Où sinon un autre mode de développement ?

Merci d'avance.
21/06/2010, 18h06
RomainVALERI

Pour gérer le binding dans ce genre de situations de confusion avec this, tu peux t'inspirer de ce qu'ils ont fait dans Prototype avec la fonction Function.bind :)

sinon :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script>
function Toto(id1)
{   
   this.objet = document.getElementById(id1);
   bonk=this.objet.id
   this.fonction = function(){ alert(bonk) }
    this.objet.onclick = this.fonction;
}
</script>
<div id="bar" onclick="Toto('toc')">lkjlkj</div>
<div id="toc" >lkjlkj</div>

22/06/2010, 11h28
Difré91

@RomainVALERI :
Ce que tu me montre est la solution, mais ça ne me dit pas comment l'atteindre (à moins que j'utilise Prototype). Pourrais tu m'expliquer brièvement ce qu'il y a derrière cette fonction si tu sais ?

@SpaceFrog :
Mon problème, c'est d'accèder à des attributs de classes dans ma fonction, ce que tu esquive en utilisant une variable locale. Le problème, c'est si je doit modifier un attribut de classe, la variable locale ne suivra pas. Et en plus on perd tout l'intérêt de la POO !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
var temp=new Array()
function Toto(id1)
{   
   this.objet = document.getElementById(id1);
   temp.push(this.objet)
   this.objet.index=temp.length-1
   this.fonction = function(){ alert(temp[this.index].id) }
    this.objet.onclick = this.fonction;
}
</script>
</head>
<body >
<div id="bar" onclick="Toto('toc')">bar</div>
<div id="toc" >toc</div>
<br/>
<div id="bip" onclick="Toto('bop')">bar</div>
<div id="bop" >bop</div>
 
</body>
</html>

:aie:

22/06/2010, 12h00
Difré91

En fait autant ne pas faire de classes et tout stocker a coté !

Merci Javascript !
22/06/2010, 12h17
SpaceFrog

ben à la base js n'est pas destiné à faire de la POO :roll:

Habituellement, pour pallier à ce genre de chose, on référence le this de l'objet dans une variable :
Code:

1 2 3 4 5 6 7 8 9 function Toto(id) { var that = this; this.objet = document.getElementById(id); this.fonction = function() { alert(that.objet.getAttribute('id')); } this.objet.onclick = this.fonction; }
A noter que si tu ajoutes des propriétés et méthodes à this, ces ajouts sont répercutés dans that puisque c'est une référence et non une copie.

22/06/2010, 13h24
Bovino

Citation:

Envoyé par SpaceFrog

ben à la base js n'est pas destiné à faire de la POO :roll:

Citation:

JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives. C'est un langage orienté objets à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d'en générer des objets héritiers personnalisés.

http://fr.wikipedia.org/wiki/Javascript
22/06/2010, 14h12
Difré91

@bovino : je venais de trouver ta méthode et je comptais la poster sur le fofo tout content de moi ^^
En tout cas merci pour la réponse, je pense que c'est la meilleure chose à faire, référencer this !!!

Du coup tout marche nickel et je suis heureux !!!

ou pour éviter la variable un peu tristounette

Code:

1
2
3
4
5
6
7
8
9
10
function Toto(id){
 
	this.objet = document.getElementById(id);
	with(this){
		fonction = function(){
			alert(objet.getAttribute('id')); 
		}
 		objet.onclick = fonction;
	}
}