Pourquoi et comment utiliser un prototype en JavaScript

Création d’un prototype en JavaScript à l’aide d’un système de constructeur

Pour utiliser un prototype en JavaScript, il faut au préalable créer une fonction constructeur.

function UneFonction(nombre) {

}

Quelle différence avec une fonction normale ?
Lorsque l’on observe le code ci-dessus, on s’aperçoit qu’il n’y en a aucune. Mais puisque nous décidons d’utiliser une instance de cette fonction (même fonctionnement qu’une classe) dans une variable, elle est appelée fonction constructeur.

D’ailleurs normalement nous attachons aux fonctions constructeurs des propriétés et des méthodes.

Dans notre exemple, nous allons ajouter une propriété et une méthode.

function UneFonction(nombre) {

  this.nombre = nombre;

  this.getNombre = function() {

    return this.nombre;

  }

}

Pour utiliser cette fonction constructeur, nous utiliserons le mot-clé "new" en JavaScript. Nous créons ainsi une nouvelle instance de "UneFonction".

function UneFonction(nombre) {

  this.nombre = nombre;

  this.getNombre = function() {

    return this.nombre;

  }

}

var inst = new UneFonction(34);

Optimisation de la fonction constructeur

Le JavaScript est un langage orienté prototype. Ainsi en les utilisant nous optimiserons notre code et par conséquent les fonctions constructeurs.

Nous allons changer notre code précédent et à la place utiliser les prototypes pour la méthode "getNombre".

function UneFonction(nombre) {

 this.nombre = nombre

}

UneFonction.prototype.getNombre = function() {

    return this.nombre;

};

var inst = new UneFonction(34);

Les choses paraissent plus compliquées surtout lorsque l’on ne maîtrise les prototypes. Mais le résultat est identique et surtout le code est optimisé.

Utilisation d’un prototype avec une fonction constructeur

Si on se réfère à l’exemple précédent pour pouvoir utiliser la méthode du prototype, il suffit d’appeler "getNombre" comme une méthode normale.

function UneFonction(nombre) {

 this.nombre = nombre

}

UneFonction.prototype.getNombre = function() {

    return this.nombre;

};

var inst = new UneFonction(34);

// Résultat 34
console.log(inst.getNombre());

Le résultat sera 34.

Des méthodes présentes dans les prototypes

Des méthodes et des propriétés sont déjà présentes par défaut dans les fonctions par exemple. Faisons un test sur un navigateur Firefox.

function UneFonction() {

}

console.log(UneFonction);

Le résultat renvoyé par la console est le suivant.

On y découvre de nombreuses méthodes et propriétés alors que nous ne les avions pas lors de la création de la fonction. Les méthodes et les propriétés dans les prototypes s’utilisent comme celles des fonctions.

function UneFonction() {

}

// Utilisation de la méthode toString()
console.log(UneFonction.toString());

Une autre méthode pour la création des prototypes

Il est possible de créer les prototypes d’une autre manière. Pour cela nous allons utiliser la méthode "Object.create()".

var unObjet = {

  propriete1: 1,
  hello: function() {

    console.log('hello');

  }

}

var variable = Object.create(unObjet);

variable.nom = 'Henrique'

console.log(variable);

Dans la console on voit bien la propriété "nom" ainsi que la propriété et la méthode du prototype qui correspond aux informations de l’objet "unObjet" transmis au prototype grâce à "Object.create()".

On peut d’ailleurs enchaîner les prototypes.

var unObjet = {

  propriete1: 1,
  hello: function() {

    console.log('hello');

  }

}

var unAutreObjet = Object.create(unObjet);

unAutreObjet.propriete2 = 2;


var variable = Object.create(unAutreObjet);

variable.nom = 'Henrique'

console.log(variable);

Nous voyons bien toutes les méthodes et propriétés qui pourront être utilisées.

Et les classes en ES6

Il est possible d’abandonner tout le système de prototype et de fonction constructeur et les remplacer par des classes depuis ES6.