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 !

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager