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

**Difré91** · 21/06/2010, 17h30

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 :

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

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.

**RomainVALERI** · 21/06/2010, 18h06

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

**SpaceFrog** · 21/06/2010, 18h40

sinon :

Code :

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

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>

**Difré91** · 22/06/2010, 11h28

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

**SpaceFrog** · 22/06/2010, 11h38

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

**Difré91** · 22/06/2010, 12h00

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

Merci Javascript !

**SpaceFrog** · 22/06/2010, 12h17

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

**Bovino** · 22/06/2010, 13h22

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

Code :

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

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.

**Bovino** · 22/06/2010, 13h24

Envoyé par SpaceFrog

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

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

**Difré91** · 22/06/2010, 14h12

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

**javatwister** · 22/06/2010, 18h46

ou pour éviter la variable un peu tristounette

Code :

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

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

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

JavaScript

Discussions similaires

Partager

Partager