Méthodes communes en javascript objet

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:

---

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:

---

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.

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:

---

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:

---

1 2 3

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

---

- Passer par le prototypage :

Code:

---

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

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 :

Citation:

---

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

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

Code:

---

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

---

Un exemple un peu plus complet

Code:

---

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

---

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.

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:

---

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

---

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

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

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:

---

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:

---

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

Citation:

---

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

Code:

---

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.

Citation:

---

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:

---

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:

---

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}

---

Lol, pour ma signature :D

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 ? :mouarf:

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

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:

---

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

Code:

---

1 2 3

var Constructeur = { localVar: 'bar' };

---

Citation:

---

Juste des objets et des instances

---

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

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

Citation:

---

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

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:

---

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

---

Citation:

---

Envoyé par dragonno

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:

---

1 2 3 4

var objet = { propriete: "valeur" }

---

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

Code:

---

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:

---

1 2 3 4 5 6

var Modele = function constructeur(){ this.propriete = "valeur"; };   var objet = new Modele();

---

Code:

---

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.

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

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:

---

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

Citation:

---

DeLorean

---

Tiens je connaissais pas ce modèle ;)
J'ai toujours pas regardé le film ;)
http://t0.gstatic.com/images?q=tbn:A...xoDtrCHoAHPpAA

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

Citation:

---

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

---

ou encore :

Citation:

---

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

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 :

Citation:

---

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.

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

Tout ça pour pouvoir écrire ca :

Code:

---

orc.set('vie', orc.get('vie')+10);

---

A la place de :

Code:

---

orc.vie+=10;

---

:mrgreen:

Quel est l’intérêt ?

@Dragonno : si tu écris un jeu en Javascript , je te conseil de chercher la performance avant tous ! les call sur des fonctions closures en Javascript sont couteuses.

Essaie donc d'avoir accès à des variables privées, tu vas comprendre ;)
(lecture et écriture)
Elles ne sont pas accessibles et je dois y avoir un accès complet à partir d'autres fonctions classiques et si possible au travers de méthodes partagées, comme je l'ai dis dans le topic déjà.
Mais bon je pense être bientôt arrivé à ce que je veux garce aux différents intervenants du topic ;)


Ps:
Oui c'est vrai tu as raison pour les jeux javascript, je compte le faire avec craftyJS en ce moment.

Merci TheGwy ;)
j'ai corrigé.

SylvainPV :
Oui, l'article le dit bien que les classes n'existent pas mais le fait de parler de classes pour expliqer les objets javascript ça induit en erreur quand même, puisque beaucoup de tutos font comme ça, ils parlent de "classe" pour expliquer les objets, tout en précisant avant que les classes n'existent pas en javascript.
Le mieux serait de ne pas en parler du tout dans les cours sur les objets javascript, juste de dire que les classes n'existent pas et ne pas aller plus loin en montrant qu'on peut les simuler, il faut faire entrer dans la tête des nouveaux en objets javascript comme moi qu'il n'y a que les objets et qu'on ne parle que d'objets, c'est à mon avis la meilleure façon.