IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] portée de "this"


Sujet :

JavaScript

Vue hybride

Finidrigoler [DOM] portée de... 05/07/2007, 10h22
Auteur bonjour, essaye comme ceci... 05/07/2007, 10h50
FremyCompany x.object = this; x.onclick =... 05/07/2007, 12h21
Finidrigoler Merci, je vais tester, je... 05/07/2007, 13h10
Finidrigoler Apres test : FremyCompany... 05/07/2007, 14h09
Finidrigoler Bonjour, En fait, si... 05/07/2007, 12h21
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé

    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 64
    Par défaut [DOM] portée de "this"
    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 )

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    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);
    }

  3. #3
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    x.object = this;
    x.onclick = function() { return this.object.test(); }

  4. #4
    Membre confirmé

    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 64
    Par défaut
    Citation 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" )

  5. #5
    Membre confirmé

    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 64
    Par défaut
    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.

  6. #6
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    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)?

  7. #7
    Membre confirmé

    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 64
    Par défaut
    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 ...

+ Répondre à la discussion
Cette discussion est résolue.

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo