: javascript

Prototypes

En javascript on crée des objets d'une manière un peu différente des langages orientés objets purs (Java, PHP, C++). On dit que javascript n'est pas vraiment un langage orienté objet mais qu'il est un langage à prototypes. Ceci n'empêche pas pour autant de reproduire ce que l'on peut faire avec un langage orienté objet pur, et cela a aussi des avantages propre aux langages à prototypes qui permettent de faire des choses très intéressantes.

l'opérateur this permet d'accéder aux propriétés (ou fonctions membres) appartenant à l'instance d'un objet.

Une fonction "est un objet"

Pour créer un objet en javascript on utilise une fonction.

// Déclare une fonction constructeur
function Rectangle(largeur, hauteur) {
  this.largeur = largeur; // sauve la largeur dans l'instance
  this.hauteur = hauteur; // sauve la hauteur dans l'instance
}

var r1 = new Rectangle(10, 4); // crée un instance
var r2 = new Rectangle(12, 8); // crée une autre instance

Les variables r1 et r2 sont des références vers des instances de Rectangle. On peut accéder au propriétés des instances de cette manière:

alert(r1.largeur); // affiche la largeur du rectangle r1
alert(r2.hauteur); // affiche la hauteur du rectangle r2

On utilise l'opérateur new pour demander de créer une instance. Chaque instance occupe un peu de mémoire pour stocker les propriétés qui lui sont propre. Deux instances d'un même objet diffèrent par la valeur de leur propriétés. Il est possible qu'il existe des instances qui ont les mêmes valeurs, on parle alors de clones.

Ajouter des méthodes

Pour ajouter des méthodes à un objet, on étend son prototype:

Rectangle.prototype.surface = function() {
  return this.largeur * this.hauteur;
}

Ceci permet de calculer la surface de nos rectangle r1 et r2 ainsi:

alert( r1.surface() ); // affiche 40
alert( r2.surface() ); // affiche 96

Définir le prototype en une fois

Afin de coder toutes les méthodes de façon compact on peut utiliser JSON pour définir le prototype complètement

Rectangle.prototype = {
  surface: function() {
    return this.largeur * this.hauteur;
  },

  perimetre: function() {
    return (this.largeur + this.hauteur) * 2;
  }
};
Editer