Le modèle objet de Javascript ou comment vivre sans classes

Avant d'expliquer le fonctionnement de l'héritage dans ExtJS, il faut d'abord rappeler un certain nombre de particularités de Javascript qui n'est pas un langage orienté objet classique comme PHP par exemple.

Dans le langage Javascript, le concept de classe n'existe pas. En fait, au lieu de déclarer une classe, on déclare une fonction qui servira de constructeur pour nos objets.

L'opérateur new

L'opérateur new permet de créer un nouvel objet. Il doit être suivi d'un appel à une fonction qui va servir de constructeur. Dans cette fonction, l'opérateur this représente le nouvel objet et vous pouvez donc l'utiliser pour initialiser les propriétés.

Exemple :

function Personne(prenom, nom) {
  this.prenom = prenom;
  this.nom = nom;
}
 
var paulDupont = new Personne("Paul", "Dupont");
alert(typeof paulDupont); // Affiche "objet"
alert(paulDupont.prenom); // Affiche "Paul"
 
var pierreDurant = new Personne("Pierre", "Durant");
alert(pierreDurant.nom); // Affiche "Durant"

Ajouter des méthodes à un objet

Les méthodes peuvent être ajoutées à un objet dans le constructeur.

Exemple :

function Personne(prenom, nom) {
  this.prenom = prenom;
  this.nom = nom;
  this.afficher = function() {
    alert(this.prenom + " " + this.nom);
  }
}
 
var paulDupont = new Personne("Paul", "Dupont");
paulDupont.afficher(); // Affiche "Paul Dupont"

Cette méthode fonctionne, mais elle n'est pas optimale. On va en effet ajouter à chaque objet créé un membre afficher qui contiendra une référence vers la fonction afficher. Bien qu'une référence ne prenne pas énormément de place en mémoire, on peut déclarer autrement nos méthodes en utilisant l'objet prototype du constructeur.

L'objet prototype

Toutes les fonctions en Javascript disposent d'une propriété spéciale nommée prototype. Quand on essaie d'accéder à une propriété ou une méthode qui n'existe pas dans l'objet, Javascript regarde si le membre existe dans l'objet prototype de son constructeur et si c'est le cas il l'utilise.

Exemple :

alert(pierreDurant.profession); // Affiche "undefined"
Personne.prototype.profession = "Informaticien";
alert(pierreDurant.profession); // Affiche "Informaticien"

On peut donc utiliser cette caractéristique pour déclarer notre méthode.

function Personne(prenom, nom) {
  this.prenom = prenom;
  this.nom = nom;
}
Personne.prototype.afficher = function() {
  alert(this.prenom + " " + this.nom);
}
 
var paulDupont = new Personne("Paul", "Dupont");
paulDupont.afficher(); // Affiche "Paul Dupont"

C'est plus efficace que la méthode précédente car on ne crée qu'une référence.

Voir aussi

• La documentation de Mozilla sur l'opérateur new : https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L%27op%C3%A9rateur_new
• Un tutoriel en Anglais sur l'héritage en Javascript : http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm