Prototype vs constructeur : différence pour les méthodes en JavaScript

Question

Bonjour, je n'ai pas bien compris l'exemple que tu as montré lors de cette session. Je n'arrive pas à comprendre ce qui change lorsque l'on met la méthode sePresenter() directement dans le constructeur ou quand il est dans le prototype.
Tu as dis que ça permet d'être partagé entre tous les objets, ça me paraissait bizarre donc j'ai fais un test avec 2 objets que tu peux voir dans le code ci-dessous, ainsi je me suis dis que puisque la méthode marche est dans le prototype, alors je peux la retrouver dans un autre objet mais non, j'ai eu une erreur donc je pense que ça ne fonctionne qu'avec les mêmes objets mais dans ce cas là je vois pas pourquoi on ne laisse pas la méthode directement dans le constructeur.
function Utilisateur(prenom , nom , age){
this.prenom = prenom ;
this.nom = nom ;
this.age = age ;
this.sePresenter = () => {
return "Bonjour, je m'appelle " + prenom + " " + nom + " et j'ai " + age + " ans." ;
}
}
var user = new Utilisateur("David" , "Divad" , 45) ;
console.log(user.sePresenter()) ;
console.log(user) ;
function Jouet(couleur , taille , type){
this.couleur = couleur ;
this.taille = taille ;
this.type = type ;
}
Jouet.prototype.marcher = function (){
return "Je marche tranquillement" ;
}
batman = new Jouet("Noir" , 30 , "doudou") ;
console.log(batman.marcher()) ;
console.log(user.marcher()) ;

Louis-Nicolas Leuillet · Accepted Answer

Ahhh oui je me suis certainement mal exprimé ! Il faut que ce soit deux objets de la même classe bien entendu. Mais je te conseils de découvrir l'autre syntaxe des classes dans la suite, c'est bien plus facile !

Naoufel Boukri · Answer

Bonjour, merci pour la réponse rapide. Oui, je n'ai pas bien compris le principe des prototypes. Je n'arrive pas à comprendre quelle est la différence lorsque l'on met la méthode dans le constructeur et quand on la met dans le prototype.
Tu as dit dans la vidéo que l'on met dans le prototype quand c'est une méthode que l'on souhaite réutiliser dans tous nos objets, mais c'est la même chose quand on met dans le constructeur, alors ?

Naoufel Boukri · Answer

À part si ce que tu veux dire par là est que l'on peut l'utiliser dans d'autres objets.
Exemple :
J'ai mon objet Utilisateur et mon objet Jouet :
1.
Je mets ma méthode sePresenter() dans le constructeur Utilisateur , dans ce cas-là, je peux utiliser ma méthode pour chaque instance d' Utilisateur et c'est tout.
2.
Je mets ma méthode sePresenter() dans le prototype de Utilisateur , dans ce cas-là, je peux utiliser la méthode dans chaque instance d' Utilisateur aussi c'est la même chose, il n'y a rien qui change ?
3. (Ce que je me suis imaginé du coup comme différence, mais j'en doute)
Je mets ma méthode sePresenter() dans le prototype de Utilisateur , dans ce cas-là, je peux utiliser la méthode dans chaque instance d' Utilisateur ET de Jouet , mais j'ai essayé dans le code d'en haut et ça ne fonctionnait pas.
Voilà, je ne sais pas si j'ai été clair dans ma question haha.

Louis-Nicolas Leuillet · Answer

Bonjour Naoufel !
Je me suis peut-être légèrement mal expliqué, en effet je voulais dire que le l'on peut l'utiliser dans un autre objet si on le souhaite.
Je te dis bravo pour tester par toi-même !

Naoufel Boukri · Answer

Je suis désolé si je force, mais j'ai l'impression que c'est impossible 😭. Ou alors, quand tu dis 2 objets, ce sont 2 mêmes objets, c'est ça ?
Et quand je regarde la console (malheureusement, je ne peux pas importer d'image pour montrer), la fonction marcher n'existe que dans le prototype de l'objet Animal et non Utilisateur .
Donc, sommes-nous bien d'accord que lorsque tu dis qu'on peut l'utiliser dans un autre objet, tu veux dire un autre "même" objet (genre 2 objets Animal par exemple, et non pas un objet Animal et l'autre Utilisateur ) ?
Désolé si je force comme ça, mais comme tu dis dans la vidéo, je dois absolument comprendre ces notions pour passer à la suiite, d'autant plus que tu dis que la prochaine vidéo sera la plus difficile de tout le cours, donc je soouhaite être prêt.
function Utilisateur(prenom, nom) {
this.prenom = prenom;
this.nom = nom;
}
function Animal(prenom, maitre) {
this.prenom = prenom;
this.maitre = maitre;
}
Animal.prototype.marcher = function () {
return "Je marche";
};
let chien = new Animal("Bal", "David");
console.log(chien);
let maitre = new Utilisateur("David", "Divad");
console.log(maitre);
console.log(chien.marcher());
console.log(david.marcher());

Prototype vs constructeur : différence pour les méthodes en JavaScript

Formation JavaScript (legacy)