Discussion :

[dragonno]

Bonjour

J'ai un objet personnel javascript, avec plusieurs attributs d�clar�s avec var et qui sont donc priv�s.
Dans mon programme, si je veux lire/�crire dans chacun de ses attributs, suis-je oblig� d'utiliser deux m�thodes par attribut ?
(l'une pour lire et l'autre pour �crire et appartenant toutes deux � l'objet).

Car �a fait beaucoup de m�thodes �a je trouve.

Je me disais que je pourrais utiliser la technique de m�thodes communes pouvant �tre appel�es par tous les objets, mais j'ai du mal � voir comment la mettre en pratique.
Exemple pour l'occasion :

Question 1 : la d�claration de la classe et des objets est-elle correcte ?

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
var Porte=function()
{
var etat=0;
var couleur="bleue";
var hauteur=100;
}
 
function ouvre(valeur)
{
this.etat=valeur;
}
 
function ferme(valeur)
{
this.etat=valeur;
}
 
var porte1=new Porte();
var porte2=new Porte();

Question 2 : Ces actions Vont-elle �tre ce que j'attend d'elles ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
porte1.ouvre(1); // Doit mettre 1 dans etat de porte1.
porte1.o=ferme(0); // Doit mettre 0 dans etat de porte1.
porte2.ouvre(1); // Doit mettre 1 dans etat de porte2.

Question 3 : Comment avoir acc�s seulement � l'un des attribut, sans �tre oblig� de passer tous les param�tres mais juste celui que l'on d�cide ?

Si vous pouviez r�pondre clairement � mes deux questions �a me ferait avancer dans la compr�hension des objets javascript, car malgr� les cours que j'ai lu, j'ai un peu de mal concernant la partie r�serv�e aux fonctions communes.

[p3ga5e]

Salut,

R�ponse � la Question 1 : la notion de classe n�existe pas en JavaScript ! De plus l�objet construit par ta fonction porte est vide.
Pour construire ton objet avec l�operateur new utilise le mot clef this :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function Porte()
{
	this.etat=0;
	this.couleur="bleue";
	this.hauteur=100;
}

R�ponse � la Question 2 : non car tes fonctions ouvre et ferme ne sont pas r�f�renc�s par l�objet construit par ta fonction Porte , tes fonctions sont d�clar�es de mani�re globale et elles utilisent une r�f�rence sur un context d�objet par le mot clef this, tu te dois de t�assurer que this r�f�rence bien tes objets porte1 et porte2 lors de leurs ex�cution.

Tu as au moins 2 solutions :
- Utiliser les m�thodes call ou apply du prototype Function :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
ouvre.call(porte1,1);
ferme.call(porte1,0);
ouvre.call(porte2,1);

- Passer par le prototypage :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
Porte.prototype.ouvre = Porte.prototype.ferme =  function(valeur)
{
	this.etat=valeur;
}
 
porte1.ouvre(1); // Doit mettre 1 dans etat de porte1.
porte1.ferme(0); // Doit mettre 0 dans etat de porte1.
porte2.ouvre(1); // Doit mettre 1 dans etat de porte2.

Avec la 1er soluce tu peut ouvrir et fermer diff�rent type d�objet (une fenetre , ton esprit), avec la 2eme soluce seule les objets de type Porte encapsule les fonctions ouvre et ferme

[dragonno]

Merci p3ga5e

Pour les classes je sais qu'elles n'existent pas en javascript mais il faut bien la nommer d'une certaine fa�on ^^
(Bon j'aurais pu dire "pseudo-classe" �a s'y pr�tait mieux, mais c'�tait plus rapide d'�crire classe et �a mange pas de pain).

Pour ma question 1:
La classe que j'ai �cris contient 3 attributs d�clar�s en private, comme tu le vois, et je les d�clare avec this elles seront en public, et je veux �viter �a.

J'essaie d'avoir la norme d'�criture aussi ordonn�e que possible c'est pour cela que je veux utiliser une m�thode propri�taire pour lire les donn�es de l'objet.
Seulement plus il y a d'attributs � lire et �crire et plus il y a de methodes get et set � �crire, c'est pour �a que je voudrais la m�thode commune, j'ai vu que �a existait mais j'ai du mal � l'appliquer pour le moment.

Pour ma question 2 :

tu te dois de t�assurer que this r�f�rence bien tes objets porte1 et porte2 lors de leurs ex�cution.

Oui, c'est ce que je veux, c'est pour �a que je cherche une m�thode qui � la fois r�f�rence bien la pseudo-classe et serait commune � tous les objets cr��s, de fa�on que chaque objet puisse ouvrir et fermer sa porte.

Je vais essayer avec call ou proto pour voir, merci

[Bovino]

Bah... tu peux faire un getter / setter :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
MonSuperObjet.prototype.getOrSet = function(prop, value){
    if(!prop in this){
        console.warn('Erreur : ' + prop + ' n\' est pas une propriété de MonSuperObjet');
        return false;
    }
    if(typeof value !== 'undefined'){
        this[prop] = value;
    }
    return this[prop];
}

[Bovino]

Un exemple un peu plus complet

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
MonSuperObjet = function(){
    this.foo = 'bar';
    this.toto = 'tata';
};
MonSuperObjet.prototype.getOrSet = function(prop, value){
    if(!prop in this){
        console.warn('Erreur : ' + prop + ' n\' est pas une propriété de MonSuperObjet');
        return false;
    }
    if(typeof value !== 'undefined'){
        this[prop] = value;
    }
    return this[prop];
};
var my1 = new MonSuperObjet();
console.log(my1.getOrSet('foo'));
console.log(my1.getOrSet('toto', 'titi'));
console.log(my1.getOrSet('inconnu'));

[dragonno]

Merci Bovino !


PS: Le r�sultat doit appara�tre dans la console d�veloppeur ? (firefox)
J'ai plac� le code dans mon fichier JS et re-actualis� la page, la console d�veloppeur n'affiche rien.

[Kaamo]

Pour "compl�mentariser" (�a se dit ? ) Bovino, si tu veux simuler l'encapsulation (membre priv�, etc) en javascript, tu peux passer par un pattern de programmation bien connu : le module pattern.
Avec l'exemple de Bovino, tu peux tr�s bien modifier � la vol�e une propri�t� sans passer par la m�thode set/get.

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
my1.foo = 'nouvelle valeur';
console.log(foo); // 'nouvelle valeur'

Pour emp�cher cela, il y a le "module pattern" :

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
26
27
28
29
30
31
32
33
34
35
36
var monNameSpace = (function () {
  var maVar; // visible que dans monNameSpace
 
  maVar = "je suis privée";
 
  // Fonction Privée accessible que ici
  var direBonjour = function() {
    console.log('Bonjour, ' + maVar);
  };
 
  // Retourne un objet ouvert au public qui contient ce qui doit l'être
  return {
    // setter qui permet de changer la valeur de maVar 
    setMaVar: function(valeur){
      maVar = valeur;
    },
 
    // getter qui permet de récupérer la valeur de maVar 
    getMaVar: function(){
      return maVar;
    },
 
    // Fonction Publique qui appelle une privée
    log: function() {
      direBonjour();
    }
  };
 
})();
 
console.log(monNameSpace.getMaVar()); // "je suis privée"
console.log(monNameSpace.maVar); // undefined
monNameSpace.maVar = 'toto';
console.log(monNameSpace.getMaVar()); // toujours "je suis privée", par contre on a ajouté "à la barbare" une propriété à l'objet public retourné qui n'a rien à voir avec l'autre maVar 
monNameSpace.setMaVar('on me set !');
console.log(monNameSpace.getMaVar()); // "on me set !"

En gros, tu retournes un objet qui rend public ce qui doit l'�tre.
Enfin, si tu veux "industrialiser" les getters/setters, tu peux toujours faire une boucle sur les propri�t�s � rendre publiques et les retourner dans l'objet.

ps : Tu peux ex�cuter ce bout de code directement dans la console d�veloppeur

[dragonno]

Bonjour Kaamo

Alors pour l�expression, c'est soit "compl�ter" soit "en compl�ment", c'est au choix

Maintenant pour ce qui de cette partie-l� :

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
return {
    // setter qui permet de changer la valeur de maVar 
    setMaVar: function(valeur){
      maVar = valeur;
    },
 
    // getter qui permet de récupérer la valeur de maVar 
    getMaVar: function(){
      return maVar;
    },
 
    // Fonction Publique qui appelle une privée
    log: function() {
      direBonjour();
    }
  };

Tu as bien analys� mon but qui est de garder priv� les attributs de ma "classe" javascript.
Ce que j'en comprend, c'est que tu retournes un objet ayant 3 m�thodes publiques (setmavar, getmavar, et log) et qui lui-m�me au travers de ses m�thodes va afficher la valeur de "mavar" (qui est priv�e dans la "classe" javascript).

Mais c'est pas un peu trop lourd tout �a, juste pour pouvoir lire et �crire l'attribut priv� d'un objet ?
Je suis s�r qu'il y a plus simple mais j'aimerais bien savoir quoi.
Je vais essayer de retrouver l'endroit o� j'avais aper�u la m�thode sur le net mais �a va �tre long � trouver voire pas du tout.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

getMaVar: function(){...}

C'est la premi�re fois que je vois ces deux points plac�s comme �a, d'habitude je vois que le "=" � cet endroit.

Je vais tester les m�thodes cit�es d�j�, mais la derni�re m'est trop complexe

[Kaamo]

Mais c'est pas un peu trop lourd tout �a, juste pour pouvoir lire et �crire l'attribut priv� d'un objet ?
Je suis s�r qu'il y a plus simple mais j'aimerais bien savoir quoi.

Pas � ma connaissance. Mais bon, je suis loin de tout connaitre.
Une autre solution qui me vient, c'est ce que j'ai mis, dans un autre sujet du forum, pas plus tard qu'hier soir. Mais n'est pas compatible IE < 8 (enfin, je crois que ce n'est pas ta priorit� .. Oui on a bien vu ta signature )

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
var obj = {};
//var obj = document.createElement(); // IE 8
 
Object.defineProperty(obj, "func1", {
  value: function() {
    console.log('Hello DVP !');
  },
  writable: false, // pas sûr que ça fonctionne sur IE 8
  enumerable: false,
  configurable: true
});
 
obj.func1 = 0; // ne fait rien
console.log(obj); // affiche un objet vide {}
obj.func1(); // Hello DVP !

Writable : Si false, la valeur de la propri�t� ne peut pas �tre chang�e.
Enumerable : Si false, la propri�t� n'est pas affich�e lors d'une boucle simple sur les propri�t�s de l'objet for (var prop in obj){} ou console.log(obj) (par exemple).
Configurable : Si false, impossible de supprimer la propri�t� ou changer la valeur de ces trois attributs (writable, enumerable, configurable)

Sinon tu as bien saisi l'astuce de l'objet retourn� public pour simuler l'encapsulation en javascript.

C'est la premi�re fois que je vois ces deux points plac�s comme �a, d'habitude je vois que le "=" � cet endroit.

Tu dois confondre la d�claration / initialisation de variables avec la syntaxe de d�claration des propri�t�s d'un objet.

D�claration/Initialisation de variables :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
var toto = 'toto',
    tata = function() {
      // bip bip ouaiis
    },
    titi = 5;
console.log(toto); // 'toto'
console.log(tata); // function() { // bip bip ouaiis }
console.log(titi); // 5

On retourne un objet ... donc cette �criture est la fa�on d'attribuer une valeur � la propri�t� d'un objet

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
var obj = { 
  toto: 'toto',
  tata: function() {
    // bip bip ouaiis
  },
  titi: 5
};
console.log(obj); // Object {toto: "toto", tata: function, titi: 5}

[dragonno]

Lol, pour ma signature

L� on l'initialise dans la "classe"
var toto = 'toto'

et l� dans l'objet
toto: 'toto'

C'est bien r�sum�, ou j'ai rien compris encore ?

Sinon en reprenant l'exemple des portes que j'avais donn� au d�but �a pourrait donner quoi une m�thode simple pour lire/�crire sur les attributs priv�s d'un objet ?
Pour le moment j'ai pas encore eu le temps d'essayer les propositions, car j'essaie de comprendre les trucs nouveaux que apprend l�
En m�me temps je fais des recherches sur le net et je lis un pdf sur les objets

[Bovino]

Il n'y a pas de classe ! Juste des objets et des instances donc non, ce n'est pas �a.
Pour d�finir un objet, tu passes par un constructeur, qui peut �tre soit une fonction soit un objet litt�ral.
Si tu passes par une fonction, tu utilises la syntaxe d'une fonction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var Constructeur = function(){
    var localVar = 'foo';
};

Si tu passes par un objet litt�ral, tu utilises la notation d'objet (tu sais, ce qu'on appelle JavaScript Object Notation ) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var Constructeur = {
    localVar: 'bar'
};

[dragonno]

Juste des objets et des instances

Merci, moi j'ai toujours cru qu'un objet c'�tait une instance d'une classe oO

[Bovino]

Parce que tu n'arrives � priori pas � te faire � l'id�e qu'il existe d'autres formes de POO que les classes !
JavaScript est un langage objet par prototype.

[dragonno]

Je n'arrive pas � editer mon dernier post :/

Donc je poste ici :

Bovino, moi j'avais compris dans les objets, que pour les deux codes ci-dessus :
Le premier �tait la d�claration d'un constructeur d'objet en javascript
et que le deuxi�me �tait le m�me mais en Json.
J'avais tout faux alors ?

Dans les lectures que j'ai eu sur le net il �tait fait mention de deux fa�ons d'�crire les objets, par fonction ou par litteral et que le prototype c'etait juste pour ajouter des m�thodes ou propriet�s aux "classes".

J'essaierais de retrouver o� j'ai vu �a.

Parce que tu n'arrives � priori pas � te faire � l'id�e qu'il existe d'autres formes de POO que les classes !
JavaScript est un langage objet par prototype.

Je comprend l� que javascript ne connait qu'une seule fa�on d'�crire les objets : Par prototype.

Pourtant au post au-dessus, tu dis que c'est soit par fonction soit par litt�ral.
Je comprend plus.

Bon, maintenant je vais prendre le temps de tester ce que j'ai appris sinon j'avancerais pas

[TheGwy]

Ou sinon tu as ce genre de solutions qui a le m�rite de marcher partout car pas d�pendant de fonctionnalit� ES5. Et qui en plus est assez lisible et concis :

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 BlackBox(guid){
 
    var privates = {
 
        counter: 0,
        guid: guid
    };
 
    this.set = function(key, value){
 
        privates[key] = value;
    };
    this.get = function(key){
 
        return privates[key];
    };
}
 
var instance = new BlackBox("azerty");
instance.set('counter', instance.get('counter')+1);
 
console.log('do work', instance.get('counter'), instance.get('guid')); // 1, "azerty"
console.log('do not work', instance.counter, instance.guid); // undefined, undefined
console.log('do not work', instance.privates); // undefined

[SylvainPV]

Je n'arrive pas � editer mon dernier post :/
Bovino, moi j'avais compris dans les objets, que pour les deux codes ci-dessus :
Le premier �tait la d�claration d'un constructeur d'objet en javascript
et que le deuxi�me �tait le m�me mais en Json.
J'avais tout faux alors ?

Dans les lectures que j'ai eu sur le net il �tait fait mention de deux fa�ons d'�crire les objets, par fonction ou par litteral et que le prototype c'etait juste pour ajouter des m�thodes ou propriet�s aux "classes".

J'essaierais de retrouver o� j'ai vu �a.


Je comprend l� que javascript ne connait qu'une seule fa�on d'�crire les objets : Par prototype.

Pourtant au post au-dessus, tu dis que c'est soit par fonction soit par litt�ral.
Je comprend plus.

Bon, maintenant je vais prendre le temps de tester ce que j'ai appris sinon j'avancerais pas

Tu confonds la d�claration d'un objet avec son prototype.
Quand tu d�clares un objet de mani�re litt�rale:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
var objet = {
propriete: "valeur"
}

Ton objet a le prototype par d�faut qui est le prototype de Object

Code console :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
> typeof objet
"object"
> objet instanceof Object
true
> objet.constructor
function Object() { [native code] }

De m�me que quand tu d�clares un objet via une fonction:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var Modele = function constructeur(){
   this.propriete = "valeur";
};
 
var objet = new Modele();

Code console :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
> typeof objet
"object"
> objet.constructor
function constructeur(){
   this.propriete = "valeur";
}
> objet instanceof Modele
true
> Modele instanceof Object
true

alors tu d�clares un objet qui h�rite du prototype de Modele. Modele h�rite lui-m�me du prototype de Fonction.

Si tu as fait du Java c'est un peu d�licat � comprendre, car il n'y a pas de classes mais que des instances : ou plus pr�cis�ment des objets qui poss�dent les propri�t�s d�finies dans leur prototype.

[Kaamo]

C'est le plus dur � comprendre en javascript quand tu as ton bagage et ta notion de POO venant des autres langages. En effet, dans les langages classiques (Java, C++, etc), l'objet est cr�� � partir d'une classe par instanciation.
En javascript, l'objet est cr�� � l'aide d'un autre objet d�j� existant qui devient un prototype du nouvel objet.

Pour te faire un dessin, imagine qu'en POO classique une classe pourrait �tre le mod�le d'une voiture (DeLorean, au hasard ) qui dresse l'ensemble des caract�ristiques et des propri�t�s de celle - ci, comme un moule. Un objet pourrait �tre une voiture (une instance de la classe) cr��e � partir du moule.

En POO par prototype, en javascript, un objet est cr�� � partir d'un autre objet (l'objet de base �tant Object) qui est "d�cor�". On dit alors que l'objet de base est le prototype de ce nouvel objet. Si on reprend notre DeLorean, en javascript, on la cr��e en prenant notre objet maitre, et en le d�corant comme il se doit pour arriver � notre DeLorean finale. Cette DeLorean aurait donc toutes ses propri�t�s et caract�ristiques mais, �galement, toujours acc�s � l'ensemble des propri�t�s de son prototype (qu'on a utilis� pour la cr�er).

Sur DVP : Programmation orient�e objet par prototype

[dragonno]

J'ai regard� la m�thode utilisant call cit�e en milieu du topic mais on ne peut que lire avec, donc je ne l'utiliserais pas.
Je ne veux pas non plus utiliser this (cit� en milieu du topic) pour les variables, afin de pouvoir les garder priv�es.
Il me reste � tester la m�thode avec retour d'un objet public, je le ferais demain.

TheGwy :
J'essaie d'apprendre ta m�thode sur cet exemple :

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
function Perso(clan){
     var infos = {
         vie: 0,
        clan: clan
    };
     this.set = function(caract, valeur){
         infos[caract] = valeur;
    };
    this.get = function(caract){
         return infos[caract];
    };
}
 
var orc = new Perso("orc");
orc.set('vie', orc.get('vie')+10);

Est-ce que je l'ai bien adapt�e � cet exemple ?

SylvainPV :
Je te remercie SylvainP pour tes exemples
Dans ton exemple litteral tu n'utilises pas new alors que tu l'utilises pour l'exemple avec fonction, pourquoi ?

Kaamo :
En fait je n'ai pas de bagage en Classes ni objets, mon exp�rience c'est le C et le turbo-pascal
Mais j'ai lu beaucoup d'articles sur �a, et quand j'aborde les objets en javascript je confonds car javascript est assez confus lui-m�me au niveau de �a je trouve et pas mal d'articles sur le net entretiennent la confusion.
Mais avec vos explications �a me semble plus clair maintenant, j'ai enfin compris qu'en javascript on ne doit m�me pas parler de "pseudo-classes" ni de "classes" tout en guillemets, mais seulement d'objets, ayant un prototype et d�rivant tous du mod�le object de javascript.
(Oui j'ai mis du temps � comprendre �a^^)

DeLorean

Tiens je connaissais pas ce mod�le
J'ai toujours pas regard� le film


Info Wikipedia

Merci du lien vers le cours javascrip de developpez, cependant c'est le premier article que j'ai d�j� lu (avant d'autres) et comme tu peux le voir dedans, le fait de montrer une d�claration d'objet avec le mot Maclasse()

Le code suivant illustre la mise en oeuvre d'une classe JavaScript en utilisant ce principe :

ou encore :

Nous pouvons remarquer dans le code ci-dessus que la fonction MaClasse permet de d�finir le nom de la classe.

�a met le doute et �a ne contribue pas � simplifier les choses du point de vue de celui qui aborde les objets javascript (sujet de l'article) pour la premiere fois.

M'enfin, maintenant je pense avoir compris grace � vous

[SylvainPV]

L'op�rateur new n'est valable que pour la d�claration � partir d'un constructeur. Il peut �tre apparent� � une fonction clone(), pour passer d'un mod�le de base � plusieurs instances. Tandis que pour la d�claration litt�rale, l'objet est construit � partir de rien (en fait � partir de Object).

Donc la d�claration litt�rale est pratique pour les objets sans mod�le bien d�fini ou � instance unique (un peu comme les singletons en Java) tandis que la d�claration par constructeur est id�ale pour produire des instances en s�rie � partir de mod�les.

Dans l'article cit� pr�c�demment (et qui est tr�s bien �crit), l'auteur indique bien :

Tout d'abord, en JavaScript, la notion de classe n'existe pas et le langage n'est pas typ�. Nous pouvons d�j� nous apercevoir que les m�canismes relatifs � la programmation orient�e objet vont �tre tr�s diff�rents de ceux de Java ou C++. Ils permettont n�anmoins de mettre en oeuvre la plupart des concepts de ce paradigme.

Lorsqu'il fait r�f�rence aux classes, c'est parce que son exemple rejoint assez bien le principe de la d�claration de classe en POO, pour aider les gens du monde Java � comprendre de quoi on parle. Mais il n'y a bel et bien pas de classes en Javascript. Le prototypage est un autre type de POO qui supprime l'abstraction apport�e � la classe par rapport � l'instance, pour centraliser les deux concepts autour d'un unique mod�le objet.

[TheGwy]

@dragonno : tu as laiss� un "instange.get" qui devrait �tre un "orc.get".
Hormis �a, oui c'est corrrect.