En Javascript, tous les objets (array, date, string, object…) hérite de leur prototype. Le prototype est lui-même un objet mais ce n’est pas un objet existant, c’est à dire créer à partir d’un constructeur. Pour accéder au prototype d’un objet crée, il faut passer par la propriété prototype de la fonction constructeur : constructeur.prototype.

Le prototype est donc un objet qui représente le constructeur d’objet. Il est possible de rajouter des propriétés et des méthodes à la fonction constructeur à tout moment grâce à son prototype.

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
let moi = new Homme("dany",30);
Homme.prototype.taille = "170"; // on ajoute une propriété au constructeur Homme
document.write (moi.taille);

Affichage

170

Rappel : Le this dans la fonction représente l’objet qui sera ‘construit’ via l’opérateur new . Ici la fonction homme possède une structure, à savoir deux propriétés : ‘proprietAge’ et ‘proprietNom’.

Avantage du prototype

L’usage du prototype permet de réduire le temps d’exécution au moment de la création des objets et va exiger moins de ressources mémoire. En effet si la méthode se trouve dans le constructeur, alors toutes les instances créées doivent avoir l’empreinte mémoire de cette méthode. On va demander au programme d’occuper plus de ressources mémoire.

Sans le prototype

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
    this.methodeDonneAge = function (){
        document.write("Mon age est " + this.proprietAge + " ans");
    }
}
 
let moi = new Homme("dany",30);
let lui = new Homme("lui",30);
let elle = new Homme("elle",30);

Dans cet exemple, en créant les objets, la variable methodeDonneAge() sera stocké trois fois en mémoire.

Avec le prototype

Notre exemple précédent deviendra donc

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
 
let moi = new Homme("dany",30);
let lui = new Homme("lui",30);
let elle = new Homme("elle",30);
 
Homme.prototype.methodeDonneAge = function (){
    document.write("Mon age est " + this.proprietAge + " ans");
}

Vous remarquez dans ce cas que la variable methodeDonneAge() est mise en mémoire qu’une seule fois au lieu de trois fois auparavant! Elle est mise en mémoire dans l’objet prototype du constructeur.

Comme dans l’exemple ci-dessus, methodeDonneAge() devient aussi une méthode d’instance qui pourra être appelée pour chaque instance à tout moment.

Mécanisme de surcharge

Ce mécanisme consiste à modifier une propriété ou une méthode en cours de route. Quand on appelle une méthode sur une instance, javascript va vérifier si elle existe dans le constructeur avant de la chercher dans l’objet prototype. Si une méthode est déclarée dans le constructeur elle ne pourra pas être surchargée par le prototype.

Méthode déclarée dans le constructeur

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
    this.parle = function() {
        document.write("hello");
    }
}
 
Homme.prototype.parle = function() {
   document.write("salut");
}
let moi = new Homme("dany",30);
moi.parle();

Affichage

Vous remarquez que la surcharge ne fonctionne pas.

Méthode déclarée par le prototype

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
 
Homme.prototype.parle = function() {
   document.write("hello");
}
 
Homme.prototype.parle = function() {
   document.write("salut");
}
 
let moi = new Homme("dany",30);
moi.parle();

Affichage

Dans ce cas la surcharge fonctionne.

Méthode statique

Il ne faut pas confondre une méthode d’instance et une méthode statique (ou méthode de classe). La méthode d’instance vue plus haut est une méthode qui est déclarée soit dans le constructeur ou soit par le prototype et qui reste accessible par l’objet crée (l’instance). Une méthode statique est méthode définie par le constructeur mais sans l’opérateur this. Elle est accessible que par le constructeur mais pas par l’objet.

Erreur d’accés par l’instance

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
 
let moi = new Homme("dany",30);
 
Homme.methodeDonneAge = function (){
    document.write("Mon age est " + this.proprietAge + " ans");
}
 
moi.methodeDonneAge(); // génére une erreur

Dans ce cas le programme retourne une erreur : Uncaught TypeError: moi.methodeDonneAge is not a function . Cela signifie que la méthode statique ne peut pas être accessible par l’instance, ce qui est normal puisqu’elle n’est pas déclarée par le constructeur.

Erreur d’accés aux propriétés

Dans cette exemple, on appelle la méthode par le constructeur, et non plus par l’instance.

let Homme = function(nom,age){
    this.proprietAge = age;
    this.proprietNom = nom;
}
 
Homme.methodeDonneAge = function (){
    document.write("Mon age est " + this.proprietAge + " ans");
}
 
Homme.methodeDonneAge(); // génére une erreur

Affichage

Vous remarquez que le programme affiche undefined pour this.proprietAge. En effet, les propriétés déclarées par le this dans le constructeur ne sont pas accessibles par les méthodes statiques.

Héritage en Javascript

Le principe consiste à créer un second constructeur qui décline du premier, comme le constructeur responsable qui pourrait décliner du constructeur employé. Ce dernier va hériter des propriétés et des méthodes de employé : c’est le concept d’héritage.

/* constructeur de Employe */
let Employe = function (nom,prenom) {
  this.attrNom = nom;
  this.attrPrenom = prenom;
}
 
/* methodes de employé */
Employe.prototype.pointage = function() {
  document.writeln ("L'employé " + this.attrNom + " " +this.attrPrenom + " vient de pointer");
}
 
/* Responsable hérite de Employe */
let Responsable = function (nom,prenom) {
  Employe.call(this,nom,prenom); /* Hérite du constructeur de la classe Mère */
}
Responsable.prototype = new Employe(); /* Hérite du prototype de la classe mère */
 
/* repointage du constructeur de Responsable qui était devenu celui de Employe */
Responsable.prototype.constructor = Responsable;
 
/* methode pointage surchargée */
Responsable.prototype.pointage = function() {
  document.writeln ("<br>Le responsable " + this.attrNom + " " + this.attrPrenom + " vient de pointer");
}
 
/* nouvelle méthode pour responsable */
Responsable.prototype.reunion = function() {
  document.writeln ("<br>Le responsable " + this.attrNom + " " + this.attrPrenom + " organise une réunion");
}
 
let dany = new Employe("tine","dany");
dany.pointage();
let sandrine = new Responsable("cellu","sandrine");
sandrine.pointage();
sandrine.reunion();

Affichage

Explication

La méthode Employe.call(this,nom,prenom) signifie que le constructeur Responsable (à travers this) appele le constructeur Employe pour hériter de ses propriétés.

Ensuite Responsable.prototype = new Employe(); permet à l’objet Responsable de récupérer toutes les propriétés du prototype Employe.