emploi de "this" [Résolu]

[Sharcoux]

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 :

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

[David55]

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!

[Sharcoux]

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 :

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 :

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

[David55]

remplace:

Code :

doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);

par:

Code :

this.doc = (jDocText==null || jDocText=="") ? new JSONDoc() : JSON.parse(jDocText);

et alert(doc) par alert(this.doc)

[Watilin]

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 :

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 :

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

[Sharcoux]

@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

[David55]

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 :

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

[David55]

Sinon je peux te conseiller ce lien. Il parle aussi du mot clé this

[Sharcoux]

Bon, après modification de mon script :

Code :

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 :

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?

[David55]

et si tu remplace ton 2ème script par:

Code :

1
2
3
4
 
var cDoc = new Document("");
cDoc.loadDocument("")
alert(cDoc.doc);

[David55]

Exemple complet ressemblant au tiens:

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

[Sharcoux]

Je comprends que dalle. Bon, pour que ça marche, j'ai dû remplacer ma classe par ça :

Code :

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

[David55]

Oui j'allais te proposer la même chose:

Code :

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

[Sharcoux]

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.

[David55]

Envoyé par David55

Sinon je peux te conseiller ce lien. Il parle aussi du mot clé this

Sur ce tuto il l'utilise

[Sharcoux]

Ah oui, tiens, j'avais pas vu
Bon ben merci bien. Je vais partir là-dessus

[Bovino]

Lorsque tu écris

Code :

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 :

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

[Watilin]

Envoyé par Sharcoux

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 :

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 :

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

[Sharcoux]

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 :

1
2
3
4
function Pates(type) {
   this.type = type;
   prototype.parler = function() {...}
}

[Watilin]

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 :

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