Je ne comprends pas

Version imprimable

Je ne comprends pas

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

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

13/12/2005, 10h11
KiLVaiDeN

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 :(
13/12/2005, 10h44
SpaceFrog
oui j'en étais arrivé à peu près aux même conclucions mais en d'autres termes :wink:

j'avais tenté un truc du genre
Code:

1 2 3 Gump.prototype.ajoute = new function(elt){ this.groupage.push(elt);
et même en rajoutant le prototype dans la fonction :
Code:

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

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:

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

Re: prototype je comprends pas

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:

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

Cool :D

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

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

13/12/2005, 11h44
Claude Pelletier

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

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:

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:

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:

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.

13/12/2005, 20h24
KiLVaiDeN

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

On a bien un Array différent par classe :D
13/12/2005, 22h01
Claude Pelletier

Citation:

Envoyé par KiLVaiDeN

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

On a bien un Array différent par classe :D

C'est vrai ! :D

Bien joué ! :ccool:

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

Code:

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

13/12/2005, 22h54
Claude Pelletier

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... :oops:
13/12/2005, 23h28
Celelibi

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é."
13/12/2005, 23h40
Claude Pelletier

Citation:

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)
14/12/2005, 08h48
SpaceFrog
y'aurait un autre moyen de contourner le problème ...
Code:

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

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

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

Code:

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

http://prototype.conio.net/ => :ccool:

14/12/2005, 10h24
SpaceFrog

je me sens dépassé d'un seul coup :?
14/12/2005, 10h25
siddh

bha c est encore son truc avec $() ;)
14/12/2005, 10h29
SpaceFrog

oki mais ce n'est valable que pour deux arrays ... ??
14/12/2005, 10h33
Mr N.

A qui tu parle ? Si c'est à moi j'ai pas compris la question :oops:
14/12/2005, 10h36
SpaceFrog

oui a toi Mr N...
je fais
si je fais

Code:

trois = new Glups()

toujours pas compris mais je donne un exemple concret :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html>
    <head>
        <script src="prototype.js" type="text/javascript"></script>
    </head>
    <body>
        <textarea id="texte_un"></textarea>
        <textarea id="texte_deux"></textarea>
        <textarea id="texte_trois"></textarea>
        <script type="text/javascript">
/** Classe "Mère" **/
var Gump = Class.create();
Object.extend(Gump.prototype, {
   initialize: function() {
      this.groupage = new Array();
   },
   ajoute: function(elt) {
      this.groupage.push(elt);
   },
   inspect: function() {
       return this.groupage.inspect();
   }
});
 
/** Classe Fille **/
var Glups = Class.create();
Object.extend(Glups.prototype, Gump.prototype); 
 
 
var un    = new Glups();
var deux  = new Glups();
var trois = new Glups();
 
un.ajoute(1);
un.ajoute(2);
un.ajoute(3);
 
deux.ajoute(4);
deux.ajoute(5);
deux.ajoute(6);
 
trois.ajoute(7);
trois.ajoute(8);
trois.ajoute(9);
 
$('texte_un').value    = un.inspect();
$('texte_deux').value  = deux.inspect();
$('texte_trois').value = trois.inspect();
 
        </script>
    </body>
</html>

Ce qui donne :

Code:

1
2
3
4
5
6
 
[1, 2, 3]
 
[4, 5, 6]
 
[7, 8, 9]

En utilisant bien sur la librairie ( :twisted: ) http://prototype.conio.net

14/12/2005, 11h17
SpaceFrog

ha oki ...
mais bon une libraire vs juste un test undefined ...
14/12/2005, 11h31
Mr N.

Il y a d'autre petites features qui sont cool !
Et puis je trouve que la définission des classe est assez claire, par rapport à MaClasse.prototype.methode....

L'égout et les couleuvres...
14/12/2005, 11h33
denisC

Citation:

Envoyé par Mr N.

Il y a d'autre petites features qui sont cool !

Comme par exemple la syntaxe raccourcie de getElementById en $, hein Mr N? :lol:
14/12/2005, 11h33
SpaceFrog

je ne te l'enlèverait pas Mr N....
je reste juste sur une mauvaise impression de overlib ...
alors les librairies ... :twisted:
14/12/2005, 11h48
Mr N.

Citation:

Envoyé par denisC

Comme par exemple la syntaxe raccourcie de getElementById en $, hein Mr N? :lol:

:langue:
Ca c'est de la faute à une autre librairie qui en faisait un bon usage, mais dont les demos n'étaient pas claires :lol:

Mais franchement je regrette pas de m'etre arracher les cheveux avec ce truc, maintenant je peux plus m'en passer. Surtout les méthodes ajoutées aux arrays (each, collect, find, findAll, ...) 8)
14/12/2005, 12h06
javatwister

ah ben je vois qu'on s'amuse bien en ce moment :lol:
14/12/2005, 12h14
Claude Pelletier

La librairie Prototype est un petit bijou dans son genre. En plus de nous fournir des outils pratiques pour la programmation OO, elle sert aussi d'assise autant à des frameworks DHTML que AJAX, avec OpenRico (auquel je contribue), Behavior et Script-aculo-us.
15/12/2005, 10h59
KiLVaiDeN

Je trouve la librairie Prototype vraiment interessante ! Je vais la regarder de plus près, car dans beaucoup de projets je pense qu'elle m'aurait simplifié la vie... Et maintenant avec la "nouveauté AJAX" avoir une bonne librairie JS sur laquelle se baser semble être une bonne idée :D