[DOM] port�e de "this"

**Finidrigoler** · 05/07/2007, 10h22

Bonjour,

lorsque je fais 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
function maFonction(){
 x = '';
 str= 'un test';
 
 this.buildX = function(){
 x = document.createElement('div');
 x.appendChild(document.createTextNode('texte'));
 x.onclick = this.test;
 }
 
 this.test = function()
 {
 alert(this.str);
 }
}
 
toto = new maFonction();
 
toto.buildX();
 
document.body.appendChild(toto.x);

�a ne fonctionne pas et je ne vois pas comment y parer

a part en mettant ma fonction "test" hors de l'objet maFonction, en lui passant en parametre ce dont j'ai besoin dans l'objet courant.

sinon, j'ai quand m�me essay� de mettre :

this.x.onclick = maFonction.test.apply(this);

Au cas ou je ne serais pas clair, je reformule :

Mon probl�me est la port�e de this lorsqu'on l'utilise avec DOM,
lorsque je met element.onclik = this devient l'element DOM et non l'objet courant.

quelqu'un aurait une astuce pour m'�viter les bidouilles ?

( eviter les bidouilles = eviter de d�localiser ma fonction )

**Auteur** · 05/07/2007, 10h50

bonjour,

essaye comme ceci :

Code html :

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
37
38
39
40
41
42
43
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function maFonction(){
 this.x = '';
 var str= 'un test';
 
 this.buildX = function()
 {
   this.x = document.createElement('div');
   this.x.appendChild(document.createTextNode('texte'));
   this.x.onclick = this.test;
 }
 
 this.test = function()
 {
 alert(str);
 }
}
 
function start()
{
toto = new maFonction();
 
toto.buildX();
 
document.body.appendChild(toto.x);
}
//-->
</script>
 
</head>
 
<body onload="start()">
 
 
</body>
 
</html>

par contre ce que je n'arrive pas � comprendre c'est pourquoi dans ce cas, le message d'alerte me renvoit "undefined"

:

Code javascript :

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
function maFonction(){
 this.x = '';
 this.str= 'un test';

 this.buildX = function()
 {
   this.x = document.createElement('div');
   this.x.appendChild(document.createTextNode('texte'));
   this.x.onclick = this.test;
 }

 this.test = function()
 {
 alert(this.str);
 }
}

function start()
{
toto = new maFonction();
toto.buildX();

document.body.appendChild(toto.x);
}

**FremyCompany** · 05/07/2007, 12h21

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
x.object = this;
x.onclick = function() { return this.object.test(); }

**Finidrigoler** · 05/07/2007, 13h10

Envoy� par FremyCompany

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
x.object = this;
x.onclick = function() { return this.object.test(); }

Merci, je vais tester, je pense que �a ira

Ceci dit, si quelqu'un a une autre m�thode, je veux bien savoir aussi

( car bien que la solution de FremyCompany doit fonctionner, il doit y avoir une m�thode plus "standard" )

**Finidrigoler** · 05/07/2007, 14h09

Apres test :

FremyCompany :

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
37
38
39
40
41
42
43
44
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function maFonction(){
 this.x = '';
 this.str= 'un test';
 
 this.buildX = function()
 {
   this.x = document.createElement('div');
   this.x.appendChild(document.createTextNode('texte'));
   this.x.object = this;
   this.x.onclick = function() { return this.object.test(); }
 }
 
 this.test = function()
 {
 alert(this.str+" et type de this "+this);
 }
}
 
function start()
{
toto = new maFonction();
 
toto.buildX();
 
document.body.appendChild(toto.x);
 
}
//-->
</script>
 
</head>
 
<body onload="start()">
 
 
</body>
 
</html>

le "this" dans la fonction de test conserve son identit�.

Par rapport a ce que je disais a Auteur :
( en rapport avec le type de "this" )

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
37
38
39
40
41
42
43
44
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function maFonction(){
 this.x = '';
 this.str= 'un test';
 
 this.buildX = function()
 {
   this.x = document.createElement('div');
   this.x.appendChild(document.createTextNode('texte'));
   this.x.onclick = this.test;
 }
 
 this.test = function()
 {
 alert(this.str+" et type de this "+this);
 }
}
 
function start()
{
toto = new maFonction();
 
toto.buildX();
 
document.body.appendChild(toto.x);
 
}
//-->
</script>
 
</head>
 
<body onload="start()">
 
 
</body>
 
</html>

ceci dit, je suis toujours preneur de solution(s) alternative,
en attendant, je vais utiliser la m�thode de FremyCompany.

Merci.

**Auteur** · 05/07/2007, 14h34

comprends plus rien � ces histoires de this

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
function maFonction(){
 this.x = '';
 this.str= 'un test';
 
 this.buildX = function()
 {
   this.x = document.createElement('div');
   this.x.appendChild(document.createTextNode('texte'));
   this.x.object = this;
   this.x.onclick = function() { return this.object.test(); }
 }
 
 this.test = function()
 {
 alert(this.str+" et type de this "+this);
 }
}
 
function start()
{
toto = new maFonction();
 
toto.buildX();
 
document.body.appendChild(toto.x);
 
}

� quels objets se r�f�rent les diff�rents this dans ce code, surtout dans la fonction buildX (en bleu)?

**Finidrigoler** · 05/07/2007, 12h21

Bonjour,

par contre ce que je n'arrive pas � comprendre c'est pourquoi dans ce cas, le message d'alerte me renvoit "undefined" :

En fait,

si dans this.test

tu met

this.test = function()
{
alert(typeof this);
}

tu aura "ObjectHTMLDIVElement"
au lieu de "maFonction"

donc l'appel de alert(this.str); retourne undefined.

Par contre ce que je souhaite faire c'est pouvoir
utiliser une fonction qui g�re un evenement ( onclick dans l'exemple ci-dessu )
a l'interieur d'un objet, en pouvant acceder a this.

en effet en r�alit� le code ci-dessu est un exemple pour illustrer mon probl�me,
mais en r�alit�,

lors du click sur le div,

je souhaite apeller une fonction interne a l'objet "deleteFromView" et a l'interieur de deleteFromView
this.deleteFromDatabase

( qui n'existe pas dans l'objet htmlDivElement )

Sinon pour ce que tu me propose, mettre un "var" avant et ne pas r�ferencer ma variable par this.variable, �a ne peux pas r�pondre a mon probl�me

( cf ci-dessu, mon exeplication sur le but de mon script )

Si tu as une autre id�e ...

[DOM] port�e de "this"

JavaScript

Vue hybride

Partager

Partager