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}