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 :

emploi de "this"


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut emploi de "this"
    Bonjour,

    Etant habitué au Java, je suis perturbé par l'emploi de this en Javascript, qui me semble légèrement différent.

    En particulier, si j'ai une classe définie par :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    maClass = function() {
        monAttribut = 0;
        func1 = function() { this.monAttribut = 1;}
        func2 = function() { monAttribut = 1;}
    Ces deux fonctions sont-elles identiques? Parce qu'après un test, j'ai l'impression que func2 crée une variable globale monAttribut...

  2. #2
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Il me semble que ta remarque est juste car si tu ne précises pas this, dans ce cas il recherche dans son bloc s'il y a une variable qui s'appelle de la même manière sinon il en crée une!


    Donc il est possible qu'il la crée! A confirmer!


    De plus, lorsque nous voulons déclarer une variable en javascript, il est raisonnable de précédé le nom de la variable par "var" mais si on ne le met il n'y aura pas d'erreur!

  3. #3
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Bon, ben du coup, je comprends pas comment je dois utiliser les variables en javascript. Voilà ce que j'ai dans mon fichier javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var Document = function(jDocText) {
     
        var doc = null;
     
        loadDocument = function(jDocText) {
            doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);
            alert(doc);//*************** alerte 1 *********************
        }
     
        loadDocument(jDocText);
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var cDoc = null;
    cDoc = new Document(xhr.responseText);
    alert(cDoc.doc);//*************** alerte 2 *********************
    alerte1 renvoie "[object Object]"
    alors que alerte2 renvoie "undefined"...

    Je ne comprends pas pourquoi les deux ne renvoient pas là même chose...

  4. #4
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    remplace:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);
    par:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);
    et alert(doc) par alert(this.doc)

  5. #5
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Salut,
    on doit toujours utiliser this pour désigner les propriétés de la classe.

    D'autre part, le constructeur reste une fonction comme les autres. Avec ce code :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    maClass = function() {
       monAttribut = 0;
    }
     
    var obj = new maClass();
    Le simple fait d'instancier obj crée une variable gobale monAttribut.

    Pour être plus précis :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    maClass = function() {
       glob = 0;
       var loc = 1;
       this.prop = 2;
    }
    var obj = new maClass();
    Après exécution de ce bout de code, tu as une variable globale glob égale à 0, et un objet obj qui a une propriété prop égale à 2.

    Quant à loc, c'est généralement une variable locale au constructeur. Je dis bien généralement, car si tu déclares des méthodes de classe à l'intérieur du constructeur, tu peux accéder à loc depuis ces méthodes, grâce au principe des closures. Mais je te conseille d'éviter ça
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    @david55 : Merci pour ton aide.

    Malheureusement, perso, j'obtiens le même résultat : un objet avec alert1, et undefined avec alert2. Chez toi ça marche?

    @Watilin : c'est cool ! Merci pour ces explications ! C'est fou : on trouve rien sur le net qui explique ça aussi clairement que tu viens de le faire...

    J'essaie tout de suite

  7. #7
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Non je ne peux pas essayer de chez moi mais je pense que tu devrai prendre ne compte les remarques de Watilin qui sont très intéressante

    Si je trouve une autre solution je te tiens au courant (idem pour toi bien sure)

    Essaye de remplacer par:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    var Document = function(jDocText) {
     
        this.doc = null;
     
        loadDocument = function(jDocText) {
            this.doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);
            alert(this.doc);//*************** alerte 1 *********************
        }
     
        loadDocument(jDocText);
    }

  8. #8
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Sinon je peux te conseiller ce lien. Il parle aussi du mot clé this

  9. #9
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Bon, après modification de mon script :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var Document = function(jDocText) {
     
        this.doc = null;
     
        loadDocument = function(jDocText) {
            this.doc = new JSONDoc()
            alert(this.doc);
        }
     
        loadDocument(jDocText);
     
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var cDoc = null;
    cDoc = new Document("");
    alert(cDoc.doc);
    la première alerte renvoie tjs un object, mais la seconde renvoie "null" cette fois... Je suis passé à côté de qqc?

  10. #10
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    et si tu remplace ton 2ème script par:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    var cDoc = new Document("");
    cDoc.loadDocument("")
    alert(cDoc.doc);

  11. #11
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Exemple complet ressemblant au tiens:

    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
     
    function MaClasse(parametre1, parametre2) { 
     
        this.attribut1 = parametre1; 
     
        this.attribut2 = parametre2; 
     
     
     
        this.methode = function() { 
     
            alert("Attributs: " + this.attribut1 + ", " + this.attribut2); 
     
        } 
     
    } 
     
     
     
    var obj = new MaClasse("valeur1", "valeur2"); 
     
    alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1 
     
    obj.methode(); // Affiche la chaîne de caractères contenant les valeurs des attributs

  12. #12
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Je comprends que dalle. Bon, pour que ça marche, j'ai dû remplacer ma classe par ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var Document = function(jDocText) {
     
        this.doc = null;
     
        this.loadDocument = function(jDocText) {
            this.doc = new JSONDoc()
            alert(this.doc);
        }
     
        this.loadDocument(jDocText);
     
    }
    Je suis pas convaincu que ce soit une pratique correcte du javascript, mais bon...
    Si qqn a l'explication de pourquoi il faut faire ça, ou peut me proposer une méthode plus propre, hésitez pas ^^

    Merci en tout cas david et watilin

  13. #13
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Oui j'allais te proposer la même chose:

    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
     
     
    function Document(parametre1) { 
     
        this.doc = null; 
     
        this.loadDocument = function(parametre1) { 
    		this.doc = new JSONDoc ()
            alert(this.doc); 
        } 
    } 
     
     
     
    var obj = new Document(""); 
     
    alert("doc: " + obj.doc); // Affiche la valeur de l'attribut attribut1 
     
    obj.loadDocument(); // Affiche la chaîne de caractères contenant les valeurs des attributs
    Apparemment, tu dois mettre le mot clé this à chaque élément de ta classe donc meme sur tes méthodes!

    Vive le javascript


    PS: Du coup n'oublie pas de passer en RESOLU

  14. #14
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Je n'oublierai pas.
    Mais malgré tout, j'ai jamais vu de code source utilisant this devant la déclaration d'une méthode. Encore moins sur des tutos. Du coup, je suis sûr qu'il y a un autre manière de faire.

  15. #15
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Citation Envoyé par David55 Voir le message
    Sinon je peux te conseiller ce lien. Il parle aussi du mot clé this
    Sur ce tuto il l'utilise

  16. #16
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Ah oui, tiens, j'avais pas vu
    Bon ben merci bien. Je vais partir là-dessus

  17. #17
    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
    Lorsque tu écris
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    loadDocument = function(parametre1) {...}
    loadDocument est une variable et comme tu ne l'as pas déclarée en locale, c'est même une variable globale. Du coup, lorsque tu l'appelles, le contexte change et this aussi qui devient alors l'objet global (window). C'est pour ça que le this.doc ne correspond pas à celui de l'instance de ton objet obj.
    Pour parer à cela, il faut soit effectivement faire passer la fonction comme méthode de l'objet (donc avec this.loadDocument = ...), soit utiliser le prototypage, qui offre l'intérêt de ne pas avoir à redéfinir la fonction pour chaque instance de l'objet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function Document(parametre1) { 
        this.doc = null;
        this.loadDocument(tonParametre); 
    }
    Document.prototype.loadDocument = function(parametre1){
    	this.doc = new JSONDoc ();
    }
    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

  18. #18
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Citation Envoyé par Sharcoux Voir le message
    Tkt, j'oublierai pas.
    Mais malgré tout j'ai jamais vu de code source utilisant this devant la déclaration d'une méthode. Encore moins sur des tutos. Du coup, je suis sûr qu'il y a un autre manière de faire.
    Bonne intuition ! En JavaScript on a les prototypes. Exemple :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Pates(type) {
       this.type = type;
    }
     
    Pates.prototype = {
       type: null,
       parler: function() {
          alert('Bonjour, je suis une ' + this.type + ' !');
       }
    }
     
    var nouille = new Pates('nouille');
    nouille.parler();

    Le prototype permet de définir l'ensemble des propriétés et méthodes de la classe. Il est la manière la plus « proche de Java » de déclarer une classe en JavaScript.
    Le constructeur se cantonne également à son rôle en Java : il fait les intialisations. Note que je n'étais pas obligé de déclarer type dans le prototype, mais je préfère le faire pour faciliter la maintenance.

    Le gros truc en plus par rapport à Java c'est que, quand je modifie le prototype d'une classe, ça modifie en temps réel toutes les instances de la classe !
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    Pates.prototype.couleur = 'jaune';
    alert(nouille.couleur);

    Bon je te l'accorde, on évite de trop bidouiller ses classes en live quand on est sain d'esprit. Mais ça a quand même des applications assez pratiques, par exemple pour améliorer les objets natifs comme la classe Array


    PS : ouah, grillé par Bovino
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  19. #19
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    Stylé ! Merci pour toutes ces réponses. J'en profite pour une dernière question : je vois que vous séparez la fonction de la classe. Est-il possible de les regrouper? Un peu comme ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function Pates(type) {
       this.type = type;
       prototype.parler = function() {...}
    }

  20. #20
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Non, on ne peut pas. Le prototype est une propriété de la fonction Pates, on pourrait voir ça comme une variable statique. D'ailleurs, rien ne t'empêche d'ajouter d'autres variables statiques de cette manière.
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function Pates() { ... }
     
    Pates.prototype = { ... }
     
    Pates.instances = 0;

    Comme tu vois, on retrouve la plupart des concepts de Java, seule la syntaxe est différente. Il faut s'y habituer
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. onmouseover="Menu_HoverStatic(this)" object expected
    Par cyrano_de_bergerac dans le forum ASP.NET
    Réponses: 0
    Dernier message: 01/10/2010, 16h01

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