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}