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.