[DOM] portée de "this"

Version imprimable

Bonjour,

lorsque je fais ceci :
Code:

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 ? :P
( eviter les bidouilles = eviter de délocaliser ma fonction )

bonjour,

essaye comme ceci :

Code:

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:

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

Code:

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

05/07/2007, 12h21
Finidrigoler

Bonjour,

Citation:

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 ... ;)
05/07/2007, 13h10
Finidrigoler
Citation:
Envoyé par FremyCompany

Code:

1 2 x.object = this; x.onclick = function() { return this.object.test(); }
Merci, je vais tester, je pense que ça ira :yaisse2:

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

Apres test :

FremyCompany :

Code:

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:

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.

comprends plus rien à ces histoires de this :pleure::marteau::oops:
Code:

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

05/07/2007, 15h25
Finidrigoler

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 )
05/07/2007, 16h02
FremyCompany

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

Citation:

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

:( ok, dommage

Citation:

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:

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 )

05/07/2007, 17h34
Auteur
Citation:

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 :aie: .
Dans ce cas :
Code:

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 ?

Citation:

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

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:

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)

05/07/2007, 19h19
FremyCompany

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

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:

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();
*/

05/07/2007, 19h27
FremyCompany

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 ;))
05/07/2007, 21h26
Auteur

apply : qu'est-ce que c'est :oops: ?

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:

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:

1 2 function (this, arguments) { }
Ensuite, si je demande
Code:

1 2 function a(value) { }
le compilateur écrit
Code:

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

Code:

a(true)

le compilateur fera

Code:

a.apply(window, [true])

si maintenant je fais ceci :
Code:

1 2 3 4 function a(value) { ... } var o = new Object(); o.funcA = a; o.funcA(true, false, null)
le compilateur écrira
Code:

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 ?

05/07/2007, 21h44
FremyCompany

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
06/07/2007, 11h18
Auteur
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 :
1. Code:
  
  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:
  
  var toto = new Object();
2. 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:
  
  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 :()
06/07/2007, 12h12
FremyCompany
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:

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

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:

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:

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:

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

3. Les fonctions en JavaScript
Un exemple que je n'ai pas abordé ici c'est les fonctions

Vous aurez remarqué que les fonctions JavaScript ne sont pas apellée directement, mais bien avec apply... Pourquoi ?

En fait, une fonction est un JSIO (ActiveX interfacé)

En gros, il existe en code compilé la classe suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class JSFunction : JSO {
  // Code JavaScript de la fonction ("function(value) { ... }")
  private _JSCode : String;
 
  public function apply(this, arguments) {
    return _MSCompil.exec(_JSCode, this, arguments);
  }
 
  public function call(this, paramArray arguments) {
    return apply(this, arguments);
  }
 
  /*
    ... 
  */
}

Cet objet hérite donc bien de Dictionnary[String, Object] par le biais JSO
Ensuite, le compilateur JavaScript fait le reste.

Une propriété intéressante de cette classe est le SCOPE
Il s'agit de toutes les variables accessibles à la fonction

Exemple :

Code:

1
2
3
function f1() {
   window.alert("F1 a été appelée");
}

D'où la fonction f1 tire-t-elle window ???
En fait, de son scope

Voici en gros une explication simple du code compilé

Code:

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
 
/*
  Code généré lors de la création de la page
*/
var __scope = new JSScope();
for (property in window) {
   __scope.setKeyValue(property, window.retreiveValue(property))
}
/*
  Code compilé 
*/
var f1 = new JSF(__scope.createCopy(), "function () { ... }")
 
 
/* 
  Code résultant de la compilation par __MSCompil.exec de f1
  __scope est une copie de __scope déclaré plus haut
  ==> Ils évoluent pour l'instant de manière indépendante et si je changeais
     la valeur de window dans la fonction, cela ne changerait pas celle du 
     __scope en dehors de la fonction
*/ 
function(this, arguments) {
  // Intègre les arguments dans le scope
  __scope.setKeyValue("this", this);
  __scope.setKeyValue("arguments", arguments);
  // Code compilé proprement dit
  var __tmp1 = __scope.retreiveValue("window");
  __tmp1.retreiveValue("alert").apply(
    __tmp1, 
    "F1 a été appelée"
  );
  // Remet tout à zéro (il ne vaut pas que la prochaine fois que la fonction soit appelée les variables soient conservées)
  // En gros __scope redevient une copie conforme du __scope duquel il vient
  __scope.reset();
}

06/07/2007, 14h19
Finidrigoler

oulalala, interessant, mais trop loin pour moi :?

ceci dit, je note l'utilisation d'apply, et m'en reservirait :D

Je note aussi qu'il ne faut pas "prototyper" des elements DOM et qu'il ne faut surtout pas se demander pourquoi ( sous peine de :arf: )

Merci en tout cas :chin:
06/07/2007, 18h56
Auteur

Citation:

Envoyé par _cqu_

oulalala, interessant, mais trop loin pour moi :?

pareil... mais j'avoue ça me dépasse un peu :oops: :oops:
On va donc arrêter là pour le moment ;)

:merci: pour ces infos Fremy