Demande d'explication sur les prototypes

Version imprimable

Bonjour,

En plein découverte du Js, je lis pas mal de tutos à droite à gauche, mais je me rend compte que l'auto-formation c'est aussi un moyen de s'auto-embrouiller... :aie:

Si j’ai bien compris, en Js, si j'écris par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function machine(P_piece, P_rouage){ this.D_piece = P_piece; this.D_rouage = P_rouage; this.M_methode = function(P_planche){ return this.D_piece+this.D_rouage+P_planche; } } var meuble_ikea = new machine(40,10); alert(meuble_ikea.M_methode(15)); //Affiche 65
Je peut aussi écrire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function machine(P_piece, P_rouage){ this.D_piece = P_piece; this.D_rouage = P_rouage; } var meuble_ikea = new machine(40,10); machine.prototype.bricole = function(P_planche){ return this.D_piece+this.D_rouage+P_planche; } alert(meuble_ikea.bricole(40)); //Affiche 90
Constatation :

Mais du coup, la seule différence notable que je vois avec la première solution, c'est que j'ai déclaré la méthode bricole hors de mon constructeur.

Questions :

* Il n'y a pas plus d'impacts que ça ? Je peut juste décider de remplir mon constructeur, ou bien de l'éclater en prototype ?

* Si je construits des prototypes hors de mon constructeur, sont-ils déclarés à chaque nouvelles instances comme si je les avais construis DANS le constructeur ?

* Vaut-il-mieux/Vaut-il mieux-pas abuser des prototypes ?

* Les prototypes peuvent-il représenter un risque pour les données membres ?

* Chocolatine ou pain au chocolat ?

1 pièce(s) jointe(s)

Déclaré dans le constructeur, ça devient une propriété de l'objet. Donc pour 10 machines, il y aura 10 fonctions M_methode différentes, qui seront tout à fait équivalentes mais pourtant bien distinctes. Un peu comme le nombre de pièces, tu peux avoir deux machines avec 40 pièces mais ce nombre est pourtant bien spécifique à chaque machine (si tu ajoutes 10 pièces à la première, la seconde aura toujours 40 pièces)

Déclaré dans le prototype, ça devient une propriété du prototype, donc une propriété partagée par toutes les instances. Donc ce sera la même fonction partout. On peut mettre ce qu'on veut dans le prototype, pas forcément une fonction. Par exemple un chiffre, le prix de la machine:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function Machine(nbPieces){ this.nbPieces = nbPieces; } Machine.prototype.prix = 100; var machine1 = new Machine(40), machine2 = new Machine(40); console.log(machine1.prix, machine2.prix); // 100, 100 Machine.prototype.prix = 120; console.log(machine1.prix, machine2.prix); // 120, 120 machine1.prix = 150; // prix devient une propriété de l'objet machine1 et non plus du prototype console.log(machine1.prix, machine2.prix); // 150, 120
* Il n'y a pas plus d'impacts que ça ? Je peut juste décider de remplir mon constructeur, ou bien de l'éclater en prototype ?
:fleche: ben les propriétés ne sont pas dans le même objet donc oui forcément ça a un impact. Il faut séparer les propriétés spécifiques à chaque objet des propriétés communes à tous les objets issus de ce prototype.

* Si je construits des prototypes hors de mon constructeur, sont-ils déclarés à chaque nouvelles instances comme si je les avais construis DANS le constructeur ?
:fleche: tu ne construits pas des prototypes, à tout objet que tu déclares il y a un prototype associé, et tu peux venir y mettre des choses dedans. Le principe du prototype c'est qu'il est commun à toutes les instances

* Vaut-il-mieux/Vaut-il mieux-pas abuser des prototypes ?
:fleche: comme toute chose, quand on sait s'en servir correctement

* Les prototypes peuvent-il représenter un risque pour les données membres ?
:fleche: Le prototype n'influera jamais sur les objets dont il est le prototype, puisqu'il ne les connaît pas.

Un petit dessin de mon cru pour représenter prototype vs classes :
Pièce jointe 220858

24/09/2016, 09h59
eleydet

Bonjour,

Je trouve ce sujet passionnant, je m'étonne qu'il n'y ait qu'une seule réponse. Le sujet est rendu difficile à cause de problèmes liés à la terminologie, de la confusion entre les notions de classe et de prototype.

En Javascript, on peut créer un objet seul, sans qu'il soit nécessaire de créer un constructeur au préalable.

Par contre, si une série d'objets possède des propriétés communes, il est préférable de la créer à l'aide d'un constructeur.

Le langage étant dynamique, il est toujours possible de faire évoluer un objet ou un constructeur, au fil du déroulement du programme...
24/09/2016, 19h29
SylvainPV

@eleydet: les constructeurs ne sont pas nécessaires pour manipuler des objets prototypés. On peut parfaitement se débrouiller avec des factory functions et Object.create, cf http://javascript.developpez.com/act...r-la-question/
26/09/2016, 11h08
Ragoudcep

Je vous remercie (un peu tardivement, désolé) pour vos réponses,

Je comprend un peu mieux, mais j'aimerais être sûr de ce que je synthétise:

*Tout ce que je créer dans le constructeur sera attribué aux objets créés à l'aide du constructeur, ok.

*Tout ce qui est déclaré par la suite à l'aide du mot "prototype" influe directement sur toutes les instances du constructeur (existantes, et à venir).

*Le mot prototype permet donc d'ajouter/modifier des infos au constructeur (données membres, méthodes...).

C'est bien ça ?:?
26/09/2016, 11h44
SylvainPV

Les constructeurs ne sont pas une notion propre à la programmation objet orientée prototypes, je trouve qu'ils embrouillent plus qu'ils n'aident dans la compréhension des prototypes. Voilà comment je formulerai ça:
- en JS, il y a les primitives (nombre, string, booléen, undefined, null) et tout le reste est objet (y compris fonctions, Arrays, Date etc.)
- tous les objets sont prototypés, c'est-à-dire qu'ils ont un prototype et qu'ils peuvent être le prototype d'autres objets
- quand on cherche à récupérer une propriété d'un objet, monObjet.truc, si on ne la trouve pas dans les propriétés propres de l'objet, on va chercher dans les propriétés du prototype... et si elle n'est toujours pas trouvée, dans le prototype du prototype etc. On dit qu'on remonte la chaîne prototypale, et tout en haut de la chaîne il y a Object.prototype.

Là tu as tout ce qu'il faut pour comprendre les prototypes. Comme quoi le nom a beau être compliqué, le principe reste relativement simple.

Maintenant si tu veux comprendre les constructeurs, c'est là que ça devient un peu plus tordu :
- c'est une notion supplémentaire et facultative censée rendre plus familier la POO en JS pour les devs issus de POO par classes
- les constructeurs sont des fonctions ordinaires, en fait on peut appeler n'importe quelle fonction en tant que constructeur avec le mot-clé new- les fonctions ont un prototype, accessible via Object.getPrototypeOf(fonction). Mais elles ont aussi une propriété prototype correspondant au prototype de l'objet qui sera créé quand on les appelle en tant que constructeur. Cette propriété prototype est à la base est un simple objet vide.
- lorsqu'on appelle une fonction en tant que constructeur, un objet est créé à partir du prototype constructeur.prototype- à l'intérieur du code du constructeur, le mot-clé this correspond à cet objet créé. Quand il n'y a pas d'instruction return, c'est cet objet qui est retourné
- cet objet créé a une propriété constructor correspondant à la fonction qui lui a servi de constructeur.

On a donc, si tu as bien suivi, monObjet.constructor.prototype === Object.getPrototypeOf(monObjet)Si tu trouves ça très compliqué et bizarre, je suis aussi de ton avis. A l'époque de la création de JavaScript, Sun et Netscape ont contraint l'auteur de JS Brendan Eich à bricoler le langage pour le faire ressembler à Java (d'où le changement de nom, le langage s'appelant à la base LiveScript). Du coup on a hérité de plein de bizarreries tels que les constructeurs.
26/09/2016, 12h53
Ragoudcep

Après 30min de relecture intensive de ton explication, je crois que c'est bon :lol: !

Finalement, ce que je comprend, c'est que c'est une question de point de vue dans la chaine. Tous les objets sont donc encadrés par un prototype_modèle qui à servit à leur création, et un prototype de création, qui servira de modèle à son tour !

Je comprend beaucoup mieux ton dessin maintenant ! La copie de cette petite fille studieuse, c'est "Objet.prototype". (bien que je suppose que sa copie ne soient pas vide;))

monObjet.constructor.prototype === Object.getPrototypeOf(monObjet) ======> le prototype de création de mon constructeur === mon prototype_modèle qui à servit à me créer...

Je m'excuse si c'est confus, en tout cas c'était pas de la tarte à avaler...

Comme dirait Eleydet, c'est un sujet qui mériterait amplement un article complet à lui tout seul !

PS:

"Sun et Netscape ont contraint l'auteur de JS Brendan Eich à bricoler le langage pour le faire ressembler à Java" by SylvainPV

"Netscape se met à développer une version client du LiveScript, qui sera renommée JavaScript en hommage au langage Java créé par la société Sun Microsystems. "

Comme je disais, question de point de vue :mouarf:

Bon code ! Un gros merci encore pour le temps que tu a pris pour tout expliquer.
26/09/2016, 15h19
SylvainPV

Héhé oui c'est pas de la tarte. Quand on dit que Bidule.prototype n'est pas le prototype de Bidule, il y a de quoi recracher son café.

C'est marrant que tu ais de toi-même utilisé le mot "modèle" pour parler du prototype, je trouve aussi que c'est une terminologie plus claire et c'est ça qui a inspiré le nom de ma bibliothèque Object Model. "Prototype" ça a tendance à faire peur aux gens, comme quelque-chose d'expérimental et de compliqué.

Pour l'histoire de Netscape et Sun, c'est sûr que le point de vue va diverger selon les manuels. Mais 15 ans plus tard, le Brendan n'a plus sa langue dans sa poche et a bien fait comprendre qu'il n'était pas favorable à tous ses changements :) J'ai eu la chance de le voir à la dotJS en décembre dernier et c'est un bon troll ^^

Bonjour,

Je reprends cette discussion sur la POO. J'aurais trois questions à poser (oui, je sais, c'est beaucoup!).

Voici un code très classique pour créer un objet à l'aide d'un constructeur, le genre de code que j'utilise actuellement.
Code:

1 2 3 4 5 6 7 8 var ami=function(age) { this.age=age; this.dit=function() { alert("Bonjour, j'ai " + this.age + " ans!"); }; }; Eric=new ami(9); Eric.dit();
1°) SylvainPV écrivait :

Citation:

les constructeurs ne sont pas nécessaires pour manipuler des objets prototypés

Comment écrire un code équivalent, sans passer par un constructeur? Le code ci-dessous, utilisant la méthode Object.create(), vous paraît-il la bonne solution?
Code:

1 2 3 4 5 6 7 8 9 10 11 var ami = { init: function (age) { this.age = age; }, dit: function () { alert("Bonjour, j'ai " + this.age + " ans!"); } }; var Marc = Object.create(ami); Marc.init(7); Marc.dit();
2°) En fait, je ne vois pas trop l'intérêt de passer par la méthode Object.create(). Que pensez-vous du code ci-dessous?
Code:

1 2 3 4 5 6 7 8 9 10 11 var ami = { init: function (age) { this.age = age; }, dit: function () { alert("Bonjour, j'ai " + this.age + " ans!"); } }; var Paul = ami; Paul.init(8); Paul.dit();
3°) Le JavaScript évolue... Est-il devenu possible de modifier la méthode alert(), sans modifier le reste bien sûr, pour Marc dise : "Bonjour, je m'appelle Marc, j'ai 7 ans!"?

Dans le dernier exemple, Paul est assigné par référence à ami donc tous les "amis" pointeront vers le même objet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var ami = {
  init: function (age) {
    this.age = age;
  },
  dit: function () {
    alert("Bonjour, j'ai " + this.age + " ans!");
  }
};
var Paul = ami;
Paul.init(8);
Paul.dit();
 
 
var Marc = ami;
Marc.init(7);
Marc.dit();
 
 
Paul.age; // 7
Paul === Marc // true

Object.create sert à créer des objets à partir d'un prototype:

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
 
var Ami = {
  init: function (age) {
    this.age = age;
  },
  dit: function () {
    alert("Bonjour, j'ai " + this.age + " ans!");
  }
};
var Paul = Object.create(Ami);
Paul.init(8);
Paul.dit();
 
 
var Marc = Object.create(Ami);
Marc.init(7);
Marc.name = "Marc";
Marc.dit = function(){
   alert(`Bonjour, je m'appelle ${this.name}, j'ai ${this.age} ans!`)
}
 
 
Marc.dit();
Paul.dit();
 
Paul === Marc // false
Object.getPrototypeOf(Paul) === Object.getPrototypeOf(Marc) // true

08/10/2016, 21h29
melka one

jour

Citation:

Object.create sert à créer des objets à partir d'un prototype

ce serait pas mieux de dire

Object.create sert à créer des objets en indiquant un prototype
08/10/2016, 22h12
danielhagnoul

Voir : https://developer.mozilla.org/fr/doc.../Object/create

Citation:

La méthode Object.create( proto [, objetPropriétés] ) crée un nouvel objet avec un prototype donné et des propriétés données.

Voir les exemples.

si on veut obtenir la même chose que cette syntaxe

Code:

1
2
3
4
5
6
7
8
var ami=function(age) {
  this.age=age;
  this.dit=function() {
    alert("Bonjour, j'ai " + this.age + " ans!");
  };
};
Eric=new ami(9);
Eric.dit();

il faut faire comme ceci

Code:

1
2
3
4
5
6
7
8
var ami={}
 
Eric = Object.create(ami);
Eric.age=9
Eric.dit=function() {
    alert("Bonjour, j'ai " + this.age + " ans!");
  };
Eric.dit();

la seul différence est le manque de constructeur

le plus efficace serait de déclaré la fonction dans le prototype car elle est commune a toute les instance

soit de cette facon

Code:

1
2
3
4
5
6
7
8
9
10
var ami=function(age) {
  this.age=age;
  };
 
ami.prototype.dit=function() {
    alert("Bonjour, j'ai " + this.age + " ans!");
};
 
Eric=new ami(9);
Eric.dit();

soit avec object.create

Code:

1
2
3
4
5
6
7
8
9
var ami={
dit:function() {
    alert("Bonjour, j'ai " + this.age + " ans!");
  }
}
 
Eric = Object.create(ami);
Eric.age=9
Eric.dit();

un exemple complet

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#main {
  width: 10em;
  height: 10em;
  background: #cde;
  opacity:0.9
}
</style>
 
<script>
 
var ami={
dit:function() {
    console.log("Bonjour, j'ai " + this.age + " ans!");
  }
}
 
function init(){
 
Eric = Object.create(ami);
Eric.age=9
 
mimi = Object.create(ami);
mimi.age=5
 
Eric.dit()
mimi.dit()
 
}
 
function changer(){
 
ami.dit=function() {
    console.log("Re-bonjour, j'ai toujour " + this.age + " ans! et je suis jeune");
  }
 
Eric.dit()
mimi.dit()
 
}
onload=init()
</script>
</head>
<body>
  <button id="main" onclick="changer()">bbttnn</button>
</body>
</html>