Je ne comprends pas [Tutoriel]

**SpaceFrog** · 13/12/2005, 09h26

je voulais m'entrainer aux prototypes et je tombe sur un truc qui m'échappe:

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
<script type='text/javascript'>
function Gump(){
	this.groupage = new Array();
 
Gump.prototype.ajoute = function(elt){
	this.groupage.push(elt);
}
}
 
Glups.prototype = new Gump();
 
function Glups(){}
 
var un = new Glups();
var deux = new Glups();
 
un.ajoute('jean');
un.ajoute('paul');
deux.ajoute('jacques');
 
alert(deux.groupage); 
</script>

l'alert me retourne un array avec les trois prénoms au lieu de simplement jacques comme je l'aurais escompté ???

**KiLVaiDeN** · 13/12/2005, 10h11

Salut,

J'ai l'impression que la notion de prototype n'ajoute pas d'attributs d'instance, mais plutot des attributs static; donc à moins de pouvoir préciser lors de la déclaration de ton groupage qu'il s'agit d'un attribut d'instance et non d'un attribut static, ça ne marchera pas.

Selon ce que j'en ai lu, le prototypage permet d'ajouter des fonctionnalités ou des attributs aux classes déjà existantes ( certaines, et toutes les customs )

Je pense que tu pourrais faire fonctionner ton schmilblick en déclarant ton tableau à l'intérieur de ta fonction, mais je ne suis pas sûr que ça fonctionne non plus

**SpaceFrog** · 13/12/2005, 10h44

oui j'en étais arrivé à peu près aux même conclucions mais en d'autres termes

j'avais tenté un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
Gump.prototype.ajoute = new function(elt){
   this.groupage.push(elt);

et même en rajoutant le prototype dans la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function Gump(){
	this.groupage = new Array();
	this.ajoute = function(elt) {this.groupage.push(elt)}
 
}

il ne semble pas capable de dissocier les arrays ???

**KiLVaiDeN** · 13/12/2005, 10h54

Selon ce que j'en ai vu, les prototypes permettent d'ajouter des attributs ou méthodes au niveau de la Classe, mais pas au niveau des objets instanciés

Le mot clé "this" pourtant signifie bien que l'attribut est une attribut d'instance, mais j'imagine que Javascript ne le comprend pas comme ça..

Pour tenter moi aussi, j'avais essayé ceci :

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
25
26
<script type='text/javascript'> 
function Gump(){
}
 
 
function addElement(elt) {
   this.groupage = new Array();
   this.groupage.push(elt);
}
 
Gump.prototype.ajoute = addElement; 
 
Glups.prototype = new Gump(); 
 
function Glups(){} 
 
var un = new Glups(); 
var deux = new Glups(); 
 
un.ajoute('jean'); 
un.ajoute('paul'); 
deux.ajoute('jacques'); 
 
alert(deux.groupage);
alert(un.groupage);
</script>

Mais j'ai l'impression que ça ne marche pas bien....

**Claude Pelletier** · 13/12/2005, 11h38

prototype crée en effet des objets "synchrones"...

Pour utiliser les propriétés et les méthodes d'une classe dans une autre classe pour en faire des pseudos "extends", je crée un objet à l'intérieur de ma classe. Il y a peut-être moyen de faire mieux, mais ça marche bien et je n'ai jamais eu le temps de chercher une manière plus élégante de le faire.

Ainsi, supposons que j'ai une classe Vehicule et que je veux faire une classe Camion qui profite des propriétés et méthodes de Vehicule, je procède de cette manière :

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
 
function Vehicule(nbRoues, carburant){
    var nbRoues = nbRoues ;
    this.carburant = carburant ;
    this.getNbRoues = function(){
         return nbRoues ;
    }
    return this ;
}
 
function Camion(nbRoues, carburant, essieux){
    this.vehicule = new Vehicule(nbRoues, carburant) ;
    this.essieux = essieux ;
    return this ;
}
 
var ford150 = new Camion(4, "essence", 2) ;
 
alert(ford150.vehicule.getNbRoues());

**KiLVaiDeN** · 13/12/2005, 11h40

Cool

J'ajoute une petite chose par rapport au script que j'ai posté :

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
25
26
27
28
<script type='text/javascript'> 
function Gump(){
}
 
 
function addElement(elt) {
  if(this.groupage == undefined) {
   this.groupage = new Array();
  }
   this.groupage.push(elt);
}
 
Gump.prototype.ajoute = addElement; 
 
Glups.prototype = new Gump(); 
 
function Glups(){} 
 
var un = new Glups(); 
var deux = new Glups(); 
 
un.ajoute('jean'); 
un.ajoute('paul'); 
deux.ajoute('jacques'); 
 
alert(deux.groupage);
alert(un.groupage);
</script>

En ajoutant le test pour savoir si le groupage est "undefined", ça fonctionne comme on l'espère

**Claude Pelletier** · 13/12/2005, 11h44

On peut aussi utiliser le framework Prototype qui propose une belle manière de créer des "extends"...

**Celelibi** · 13/12/2005, 20h09

Allu Spafy.

J'ai l'explication à ton problème, mais malheureusement pas la solution.

Avant tout il faut savoir que la propriété __proto__ permet de remonter la hyérarchie d'héritage, parceque je m'en sert dans le code ci-dessous.
En temps normal comment ça se passe ?

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
<script type="text/javascript">
function ConstA () {
  this.compteur = 0;
  this.inc = function() {this.compteur++;};
}
 
function ConstB () {
  this.truc = 'machin';
}
ConstB.prototype = new ConstA();
 
var myObj = new ConstB();
alert(myObj.toSource()+'\n'+myObj.__proto__.toSource());
myObj.inc();
alert(myObj.toSource()+'\n'+myObj.__proto__.toSource());
</script>

Tant que la propriété compteur de l'instance myObj n'ets pas modifié, on garde celle par défaut, c'est à dire celle qui est définie dans ConstA.
Mais dès qu'elle est modifiée, alors l'objet myObj créé sa propre propriété compteur (celle-ci étant plus prioritaire quand on voudra accéder à la valeur de myObj.compteur).

Mais voilà, la propriété compteur est de type simple, c'est un simple nombre.
Mais si à la place de ce type simple on a un objet plus complexe :

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
<script type="text/javascript">
function Const0 () {
  this.compteur = 0;
}
 
function ConstA () {
  this.count = new Const0();
  this.inc = function() {this.count.compteur++;};
}
 
function ConstB () {
  this.truc = 'machin';
}
ConstB.prototype = new ConstA();
 
var myObj = new ConstB();
alert(myObj.toSource()+'\n'+myObj.__proto__.toSource());
myObj.inc();
alert(myObj.toSource()+'\n'+myObj.__proto__.toSource());
</script>

Et bah voilà les alert parlent d'elles même. myObj.count est un objet trop complexe il n'est pas recopié dans myObj, donc quand on va essayer de lire ou modifier myObj.count, on ne va pas lire/modifier la propriété locale à myObj, mais bien celle défini dans Const0.

Ce mécanisme qui consiste à créer des références et non copier les objets quand ils sont trop complexes n'est pas nouveau, y'a qu'à voir ce petit exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function ConstA () {
  truc = 0;
}
 
var myObj1 = new ConstA();
var myObj2 = myObj1;
 
myObj1.truc = 9;
alert(myObj2.truc);

Sinon, mon petit Spafy, une solution serait d'avoir ta propriété groupage dans le constructeur Glups, mais ça n'est pas forcément ce que tu cherches.

**KiLVaiDeN** · 13/12/2005, 20h24

Regardez mon code cité plus haut : il marche !!

On a bien un Array différent par classe

**Claude Pelletier** · 13/12/2005, 22h01

Envoyé par KiLVaiDeN

Regardez mon code cité plus haut : il marche !!

On a bien un Array différent par classe

C'est vrai !

Bien joué !

**Claude Pelletier** · 13/12/2005, 22h32

Je me suis amusé à simplifier le code de KiLVaiDeN :

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
function Gump(){
   function ajoute(elt) { 
      if(!this.groupage) this.groupage = new Array(); 
      this.groupage.push(elt); 
   } 
   this.ajoute = ajoute ;
} 
 
function Glups(){} 
Glups.prototype = new Gump(); 
 
var un = new Glups(); 
var deux = new Glups(); 
 
un.ajoute('jean'); 
un.ajoute('paul'); 
deux.ajoute('jacques'); 
 
alert(deux.groupage); 
alert(un.groupage);

**Claude Pelletier** · 13/12/2005, 22h54

En simplifiant le code (ou en l'organisant autrement pour être plus juste), on remarque que la function ajoute sert d'abord de définition privée à une méthode rendue publique en inscrivant this.ajoute = ajoute . Cela brise l'effet de synchronisation qui affectait le Array.

On en déduit que les objets un et deux continuent probablement de partager la même classe synchrone, mais qu'étant donné que le Array n'a pas été instancié en même temps que la classe dont il fait partie, il s'en trouve asychrone.

Hum.

J'espère que je ne dis pas de conneries...

**Celelibi** · 13/12/2005, 23h28

En effet, je n'y avais pas pensé, mais on peut définir la propriété groupage via la méthode ajoute, et comme elle sera ajouté après l'instanciation elle sera forcément locale à l'instance. Bien vu.

Mais il peut se poser quelques problèmes si il y a une méthode "enlève" pour enlever un élément du tableau. On peut vouloir tester si le tableau est vide, dans ce cas là on test : deux.groupage.length=0 mais si la propriété groupage n'existe pas on se prend une vilaine erreur du type "deux.groupage n'a pas de propriété."

**Claude Pelletier** · 13/12/2005, 23h40

Envoyé par Celelibi

Mais il peut se poser quelques problèmes si il y a une méthode "enlève" pour enlever un élément du tableau. On peut vouloir tester si le tableau est vide, dans ce cas là on test : deux.groupage.length=0 mais si la propriété groupage n'existe pas on se prend une vilaine erreur du type "deux.groupage n'a pas de propriété."

Ça vaudrait la peine d'essayer. Mais par pour moi aujourd'hui. Je passe... Finito la journée, hé, hé ! 8)

**SpaceFrog** · 14/12/2005, 08h48

y'aurait un autre moyen de contourner le problème ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
Gump.prototype.extension = function (Bonus) {
for (Propriete in Bonus) {
this[Propriete] = Bonus[sProperty];
}
}

ça introduit une boucle pour instancier les relations

**KiLVaiDeN** · 14/12/2005, 09h06

J'ai fait une version amélioré, avec un "constructeur virtuel" vous allez aimer

:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type='text/javascript'>
 
/**** Déclaration des méthodes ****/
function addElement(elt) {
  this.groupage.push(elt);
}
 
// Méthode d'initialisation
function init() {
  this.groupage = new Array();
}
/**** Fin déclaration des méthodes ****/
 
// "Classe mère"
function Gump(){
  this.init = init; // déclaration du "constructeur virtuel"
  this.ajoute = addElement; // ajout des méthodes
}
 
// "Liaison d'héritage virtuel" ??
Glups.prototype = new Gump();
 
// "Classe fille" ??
function Glups(){
  this.init(); // Appel du constructeur
}
 
var un = new Glups();
var deux = new Glups();
 
un.ajoute('jean');
un.ajoute('paul');
deux.ajoute('jacques');
 
alert(deux.groupage);
alert(un.groupage);
</script>

**Mr N.** · 14/12/2005, 09h47

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
/** Classe "Mère" **/
var Gump = Class.create();
Object.extend(Gump.prototype, {
   initialize: function() {
      this.groupage = new Array();
   },
   ajoute: function(elt) {
      this.groupage.push(elt);
   }
});
 
/** Classe Fille **/
var Glups = Class.create();
Object.extend(Glups.prototype, Gump.prototype);
 
var un = new Glups();
var deux ........................