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:

---

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

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!

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

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)

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:

---

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:

---

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

@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

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

---

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

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?

et si tu remplace ton 2ème script par:

Code:

---

1 2 3 4

var cDoc = new Document(""); cDoc.loadDocument("") alert(cDoc.doc);

---

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

---

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

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

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.

Citation:

---

Envoyé par David55

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

---

Sur ce tuto il l'utilise

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

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

---

Citation:

---

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:

---

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:

---

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

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() {...} }

---

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:

---

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

D'accord. Bon ben c'est parfait. Merci à tous !
pour la peine je vais vous mettre plein de bons points :)

les portée en javascript son à la fois simple et difficiles.

simple parce qu'il n'y a qu'une seule et unique règle
un objet est visible de tout contexte d'exécution descendant du contexte dans lequel il a été créé.


j'ai bien écrit objet que ce soit une variable un objet js une fonction la règle est toujours la même.

maintenant quelque complication.
lorsqu'on crée une variable dans une fonction sans utiliser le mot clef var
celle-ci est crée dans le contexte global.
si on utilise le mot clef var elle est crée dans le contexte d’exécution de la dite fonction.

si le code de cette fonction créé lui-même d'autre fonction (locales) les contextes d’exécution de ces fonctions étant fils du précédent la variable leur sera connue.

un détail d'importance.

Code:

---

1 2 3 4 5 6 7 8

fn1 = function() { fn2 = function() { }; var fn3 = function() { }; function fn4() { } }

---

en javascript on peut définir une fonction soit en

Code:

---

function fn (){}

---

soir

Code:

---

fn = function (){}

---

les deux sont équivalente pour la définition mais pas pour la portée.
dans l'exemple ci dessus lors de l'exécution de fn1 les fonction fn2 fn3 et fn4 sont crées.
fn2 est un nom définit sans le mot clef var la fonction est donc globale.
fn3 l'est avec var c'est une fonction locale.
fn4 est toujours locale.

la référence this à un fonctionnement identique à celui que l'on trouve dans java. la seule différence avec java est qu'il n'est pas implicite en javascript.
donc this.toto est toujours différent de toto

Code:

---

1 2 3 4 5 6

var a = { toto:45, show: function () { alert(this.toto); //ici this c'est l'objet a } };

---

pour les développeur java la notion de fonction n'existe pas seule les méthodes pleuvent l'être.
en javascript une fonction est un objet this dans le corps de la fonction représente l'objet lui-même soit donc la fonction.

Code:

---

1 2 3 4 5 6

var fn = function() { this.toto =45; alert(this.toto); }; fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn alert(fn.toto);

---

le piège est que si j'utilise fn comme constructeur d'objet alors this n'est plus la fonction mais l'objet construit.

Code:

---

1 2 3 4 5 6

var fn = function() { this.toto =45; alert(this.toto); }; var b = new fn(); //ici dans le corps de la fonction this c'est l'objet construit b alert(b.toto);

---

les closures :
l'utilisation de corps de fonction pour isoler des espace d'objet se nome closure le plus souvent on utilise des fonctions anonymes

Code:

---

fn() {...}

---

Le pb est que pour pouvoir invoquer une fonction il faut en avoir une référence (un non en général mais là elle est anonyme). On indique à l'interprète qu'on va utiliser le résultat de cette définition en le plaçant entre ()

Code:

---

(fn() {...})

---

ceci est une référence à la fonction anonyme définie dans les (). pour l'invoquer il suffit donc comme avec tout référence de faire un appel.

Code:

---

(fn() {var a = 45; ...})()

---

ainsi le code entre {} est exécuté et les objets définit à l’intérieur sont détruit
dès qu'il n'existe plus de référence à ce bloc.


A+JYT

Excellentes explications ! :ccool:

Mais à un détail près selon moi :

Citation:

---

en javascript une fonction est un objet this dans le corps de la fonction représente l'objet lui-même soit donc la fonction.

---

Non, this représente toujours l'objet qui l'a appelé, donc, dans le cadre d'une fonction comme dans ton exemple, this représente l'objet window :

Code:

---

1 2 3 4 5 6

var fn = function() { this.toto =45; alert(this); // affiche [object Window] }; fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn alert(fn.toto+' - ' + toto); // affiche undefined - 45 => toto a bien été défini pour l'objet window ;)

---

en revanche, si l'on se sert de la fonction comme constructeur, this représentera bien l'instance de l'objet puisque c'est elle qui a appelé le constructeur :

Code:

---

1 2 3 4 5 6 7 8

var fn = function() { this.toto =45; alert(this); // différent selon l'appel }; fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn alert(fn.toto+' - ' + toto); var inst = new fn(); alert(inst.toto); // 45

---

Merci Bovino et sekajin. C'était des super explications ! Hésitez pas à faire un tuto à partir de ce topic. Je suis sûr que ça peut aider bcp de monde, parce que ces subtilités constituent justement le point du javascript que je trouve le plus obscure et sur lequel ont ne trouve généralement que des informations confuses, partielles et même parfois carrément FAUSSES !

oui sorry pour window

je réfléchissais en pensant à js hors du navigateur

Meaculpa:aie:

A+JYT