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 :

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


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    159
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 159
    Par défaut Méthode de classe sur un onclick : confusion de this !
    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.

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    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

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    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>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    159
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 159
    Par défaut
    @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 !

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    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>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    159
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 159
    Par défaut
    En fait autant ne pas faire de classes et tout stocker a coté !

    Merci Javascript !

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    ben à la base js n'est pas destiné à faire de la POO
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Habituellement, pour pallier à ce genre de chose, on référence le this de l'objet dans une variable :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function Toto(id)
    {
       var that = this;
       this.objet = document.getElementById(id);
       this.fonction = function()
       { alert(that.objet.getAttribute('id')); }
     
       this.objet.onclick = this.fonction;
    }
    A noter que si tu ajoutes des propriétés et méthodes à this, ces ajouts sont répercutés dans that puisque c'est une référence et non une copie.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    ben à la base js n'est pas destiné à faire de la POO
    JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives. C'est un langage orienté objets à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d'en générer des objets héritiers personnalisés.
    http://fr.wikipedia.org/wiki/Javascript
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    159
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 159
    Par défaut
    @bovino : je venais de trouver ta méthode et je comptais la poster sur le fofo tout content de moi ^^
    En tout cas merci pour la réponse, je pense que c'est la meilleure chose à faire, référencer this !!!

    Du coup tout marche nickel et je suis heureux !!!

  11. #11
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    ou pour éviter la variable un peu tristounette

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Toto(id){
     
    	this.objet = document.getElementById(id);
    	with(this){
    		fonction = function(){
    			alert(objet.getAttribute('id')); 
    		}
     		objet.onclick = fonction;
    	}
    }

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 29/12/2010, 09h36
  2. Réponses: 2
    Dernier message: 06/07/2009, 09h45
  3. Réponses: 2
    Dernier message: 21/05/2009, 12h31
  4. Gestion de droits sur des méthodes de classe
    Par Braillane dans le forum Diagrammes de Classes
    Réponses: 1
    Dernier message: 06/10/2008, 16h31
  5. [Win32] Pointeur sur fonctions et méthodes de classe
    Par Invité dans le forum Langage
    Réponses: 4
    Dernier message: 13/09/2007, 19h07

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