[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, 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 ...

**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, 15h25

le "this.x" représente bien maFonction.x ( dans la partie bleu )

en fait, on ajoute a X ( htmldivelement ) la propriété objet

qui vaut "this" ( ou l'objet créée par mafonction )

dans le onclick ( de htmldivelement )

l'objet this vaut "this" ( alert(this) donnera htmldivelement )

{ return this.object.test(); }

signifie donc this(htmldivelement).object(l'objet qui correspondant a une réference de "maFonction").test ( qui est donc la fonction maFonction.test(); )

Euh j'ai l'impression de ne pas être trés clair, ceci dit, l'astuce donnée par FremyCompany est sacrément tordue je trouve...

( c'est pour ça que j'aimerais bien une autre solution si une autre solution plus logique existe )

**FremyCompany** · 05/07/2007, 16h02

Ben oui c'est tordu mais y'a pas mieux

Enfin si mais faut passer par une fonction qui fait la même chose mais en "automatique"

Ca parait plus propre mais en fait c'est /- pareil

si tu veux je te refais la fonction mais bon ici je vois pas l'intéret

**Finidrigoler** · 05/07/2007, 16h26

Ben oui c'est tordu mais y'a pas mieux

ok, dommage

Enfin si mais faut passer par une fonction qui fait la même chose mais en "automatique"

Je veux bien voir par curiosité ?

Sinon, je me demande s'il est possible de faire un objet qui soit a la fois un htmlDivElement et un objet "montypeperso"

car ce genre de problématique n'existerait plus.

Par exemple :

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
function monobjet extends htmlDivElement 
{
this.style.display = "none;"
 
 this.makevisible()
 {
 this.style.display = 'block';
 }
 
 this.doTest()
 {
 alert(this);
 }
}
 
toto = new monObjet()
toto.doTest();

qui retournerait htmlDivElement,

enfin je rêve je pense, mais au cas ou ...

( cel permettrait en tout cas de lier "efficacement / intuitivement" des objets html avec des fonctionnalités Ajax )

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

Envoyé par _cqu_

Euh j'ai l'impression de ne pas être trés clair, ceci dit, l'astuce donnée par FremyCompany est sacrément tordue je trouve...

euh... il est vrai que tes explications ne sont pas claires

.
Dans ce cas :

Code javascript :

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

1
2
this.x.object = this;

J'ai l'impression que le this "bleu" ne fait pas référence au même objet que le this "rouge". Je me trompe ?

Envoyé par FremyCompany

Enfin si mais faut passer par une fonction qui fait la même chose mais en "automatique"

Ca parait plus propre mais en fait c'est /- pareil

si tu veux je te refais la fonction mais bon ici je vois pas l'intéret

moi aussi, je serais curieux de voir ce que cela donne. Si tu as 5 minutes Fremy

Spacefrog : si tu passes par là promis, je ne moquerai plus de toi lorsque qu'un problème sur les expressions régulières sera posé. Tu es "une quiche" en regexp et moi "une quiche" en programmation objet

**FremyCompany** · 05/07/2007, 19h08

Alors, ok, je me lance

Cette version-ci est peut-être plus simple à comprendre en fait (elle joue sur les SCOPES (aussi appelés CLOSURES), et non plus sur la variabilité du this, même si en fait c'est lié)

Bon, j'utilise aussi les propriétés de l'objet Function (qui sont mal connues, de manière générale), d'où ma réticence à donner ce code (qui me semple un rien plus "haut-niveau"

En résumé :
- Ce code est plus facile à comprendre mais met en oeuvre des principes plus complexes (non, ce n'est pas un paradoxe

)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function bindFunction(func, object) {
  return function() {
    return func.apply(/* this = */ object, arguments);
  }
}
 
/*
   Utilisation :
   ==========
   // Exemple 1 (cas qui nous intéresse)
   this.x.onclick = bindFunction(this.test, this)
   // Exemple 2 (autre cas où on peut l'utiliser)
   setTimeout(bindFunction(this.test, this), 0)
*/

[EDIT]
Notez que moi j'avais appelé "bindFunction" autrement quand je l'ai imaginée.
J'ai finalement choisi cette notation car c'est sous cette nomination (enfin +/-) que Prototype FrameWork l'implémentait

Moi je préférais les deux nominations suivante :
- createDelegate(object, func) // VB 7à8 et C# = new xxxDelegate(func)
- addressOf(object, function) // VB 4à8 = AdressOf(Function)

**FremyCompany** · 05/07/2007, 19h19

Pour l'idée de "extends", JS ne gère pas l'héritage nativement

On peut bien sur "simuler" mais alors on ne peut faire hériter une classe JavaScript que d'une autre classe JavaScript

EXIT donc HTMLDivElement

**FremyCompany** · 05/07/2007, 19h23

Par contre, une solution peut être imaginée en sortant un peu du principe de classe et en jouant sur le coté "extensible" des objets JavaScript

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
function MyClass() { /* ... */ }
 
function makeMyClass(div) {
   for (propertyName in MyClass.prototype) {
      div[propertyName] = MyClass.prototype[propertyName];
   }
   MyClass.apply(/* this = */ div, [/* Les arguments ici, séparés par virgule*/])
}
 
/* 
  Utilisation :
  var theDiv = document.getElementById("theDiv");
  makeMyClass(theDiv);
  theDiv.test();
*/

**FremyCompany** · 05/07/2007, 19h27

Bon, là j'ai conscience de toucher aux fondements-mêmes de JS, et je sais que ce que je fais peut s'averer très obscurs même pour un développeur avancé, si une étape de l'un de mes codes vous parrait obscur, n'hésitez pas à me poser une question, je vous répondrai dès que j'aurai du temps ou je vous orienterez vers un site explicatif (sans doute pas ceux de Mozilla, ni la DOC Javascript, aucun des deux n'étant assez bien fait

)

**Auteur** · 05/07/2007, 21h26

apply : qu'est-ce que c'est

?

**FremyCompany** · 05/07/2007, 21h41

Désole de faire malgré tout appel au site de mozilla

: http://developer.mozilla.org/en/docs...Function:apply

Voici un bref résumé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function setProperty1_function(value) {
   this.property1 = value;
}
 
 
var toto = new Object();
toto.property1 = null;
toto.setProperty1 = setProperty1_function;
// DEUX CHOSES IDENTIQUES :
toto.setProperty1(true)
setProperty1_function.apply(toto, [true])

En fait, une fonction javascript marche toujours ainsi :

Code :

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

1
2
function (this, arguments) {
}

Ensuite, si je demande

Code :

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

1
2
function a(value) {
}

le compilateur écrit

Code :

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

1
2
3
function a(this, arguments) {
   var value = arguments[0];
}

Quand je ferai

Code :

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

a(true)

le compilateur fera

Code :

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

a.apply(window, [true])

si maintenant je fais ceci :

Code :

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

1
2
3
4
function a(value) { ... }
var o = new Object();
o.funcA = a;
o.funcA(true, false, null)

le compilateur écrira

Code :

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

1
2
3
4
function a(this, arguments) { var value = arguments[0]; ...}
var o = new Object();
o.funcA = a;
o.funcA.apply(o, [true, false, null])

Suis-je assez clair ainsi ?

**FremyCompany** · 05/07/2007, 21h44

Note : mes instructions compilateurs sont fausses, d'autres paramètres sont à prendre en compte pour le compilateur javascript

Ici je simplifie pour rendre le code plus facile à comprendre pour ce qui est du cas présent

**Auteur** · 06/07/2007, 11h18

Je comrpends mieux le truc....
J'irai faire un tour sur le site de Mozilla pour approfondir tout ça.

j'ai deux question néanmois :

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
toto.setProperty1 = setProperty1_function;
```
Pourquoi je peux pas passer par prototype pour attribuer ma fonction setProperty1_function à mon objet toto comme dans ces exemples 3 et 4 (post #3 de la discussion) ? Est-ce parce que dans ces exemples ce sont des objets définis par l'utilisateur, contrairement à ton exemple où tu utilises cette syntaxe ?
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
var toto = new Object();
```

Est-ce que par ce biais, je peux ajouter des méthodes à des objets natifs de javascript, par exemple ajouter une méthode aux objets renvoyés par les méthodes :

Code javascript :

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

1
2
3
4
var obj = document.getElementById("idElement");
var liste1 = obj.getElementsByTagName("input");
 
var liste2 = document.getElementsByTagName("input");

ou dit autrement : "prototyper" les objets renvoyés par getElementsByTagName(). (jusqu'à présent je n'ai pas réussi à le faire

)

**FremyCompany** · 06/07/2007, 12h12

1. Utilisation de prototype dans l'exemple
Je pourrais (Object.protoype.setProperty1 = ...) mais alors tous les objets JavaScript (voir 2) hériterait de setProperty1, ce que je ne voulais pas

Mais j'aurais pu le faire si j'avais défini myClass par exemple (mais je n'avais pas envie de le faire, dans le but de clarifier l'exemple)

2. Les objets JavaScript dans IE
Avec getElementById, ca devrait marche

Pour getElementsByTagName, ca marchera pas sous IE, car il n'y a pas de couche "JavaScript" à l'objet

En fait, sous IE, il existe deux types distinct d'objet, et un croisement des deux
- JSO (JavaScript Object)
Ce sont des objets gérés par JavaScript et JavaScript uniquement
Ils sont entièrement modifiables.

Substantiellement ce sont juste des dictionnaires String > Object
En gros, voila ce que fait le compilaiteur du code suivant :

Code :

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

1
2
3
var JSO = new Object();
JSO.property1 = true;
window.alert(JSO.property1)

Code :

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

1
2
3
4
5
6
var JSO = new Dictionnary(Of String, Object)
JSO.setKeyValue("property1", true);
window.retreiveValue("alert").apply(
   window, 
   [JSO.retreiveValue("property1")]
)

Exemples :

Code :

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

1
2
3
4
5
6
 
// 1
var jso1 = new Object();
// 2
function myClass() {}
var jso2 = new myClass();

- ActiveXObject (IE)
Ce sont des objets natifs.
Ils sont codés en durs et passés à JavaScript tel quel
Ils ne réagissent pas comme prévu pour un objet JS et iront même jusqu'à des non-sens programmatiques (appel de fonction sans (), ...)
Exemples :

Code :

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

1
2
3
4
5
 
// 1
var ax1 = new ActiveXObject("MSXML2.XMLHTTP");
// 2
var ax2 = document.getElementsByTagName("input");

- JSIO (JavaScript Interfaced Object)
Ce sont substentiellement des ActiveX mais qui disposent d'une surcouche JavaScript

Ainsi, leur utilisation "classique" repose sur un ActiveX mais une couche supplémentaire gère le coté JavaScript

Cela rend le comportement de l'objet "plus standard" du point de vue du programmeur JavaScript même si évidemment, cela n'en reste pas moins un objet codé en dur

Exemples :

Code :

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

1
2
3
4
5
6
7
 
// 1
window
// 2
document
// 3
document.getElementById("ID1")

Sous FF, c'est en fait le même principe (des objets javascripts et des classes C++ interfacée) mais l'interface est de meilleure qualité et surtout est toujours présent (aucun objet ne sera natif (ActiveXObject))

[DOM] portée de "this"

JavaScript

Partager

Partager