Développer efficacement en objet

a. Classe

Un objet est généralement construit à partir d’une classe. Cette classe joue le rôle d’usine à objets. Elle possède un plan de fabrication et peut fournir des objets à la demande.

Dans les plans de fabrication, nous avons des propriétés qui stockent des informations propres à chaque objet et des méthodes qui permettent d’interagir avec ces objets.

Une propriété est en réalité une variable dont le contexte d’usage se limite à un objet en particulier. Elle n’existe en quelque sorte qu’à l’intérieur de l’objet, ce qui confère donc à ce dernier un état.

Une méthode d’un objet est aussi une fonction JavaScript mais qui n’existe que dans le contexte de cet objet et ayant un accès aux propriétés de l’objet (donc influant sur l’état de l’objet).

Si nous effectuons une analogie avec les objets de notre entourage, nous pouvons prendre l’exemple d’un téléphone mobile. Ces propriétés sont constituées de son paramétrage et des informations que nous y avons stockées, on constate bien qu’elles sont liées à un appareil uniquement. Les méthodes sont l’ensemble des actions disponibles sur le mobile, comme l’allumer, régler le volume, passer un appel. Si elles sont présentes pour tous les appareils...

a. Simple

Comme nous l’avons vu sur la classe Object, toutes les classes disposent d’une propriété prototype qui est elle-même un objet. Cette propriété est disponible au sein de chaque instance de la classe. Elle a la particularité d’être exploitée lors d’une invocation de méthodes ou de propriétés. En effet, si une méthode ou une propriété n’est pas trouvée dans l’instance, elle est recherchée dans la propriété prototype.

La propriété prototype va devenir importante dès lors que nous avons plusieurs instances car sinon les définitions de fonction sont dupliquées au sein de chaque instance et donc occupent plus d’espace mémoire.

Exemple

function Personne( nom, prenom ) { 
  this.nom = nom; 
  this.prenom = prenom; 
  this.bonjour = function() { 
    alert( "bonjour " + this.prenom ); 
  }; 
} 
 
var p1 = new Personne( "brillant", "alexandre" ); 
var p2 = new Personne( "brillant", "alexandre" ); 
alert( p1.bonjour == p2.bonjour ); 

Nous avons créé deux instances puis nous comparons la fonction bonjour, elle s’avère différente pour chaque instance. Ceci n’est pas acceptable en termes de ressource et en termes objet car nos méthodes ne devraient pas varier selon les instances. Grâce à la propriété prototype, nous allons pouvoir remédier à cela.

Si nous réécrivons notre exemple, nous avons maintenant :

function Personne( nom, prenom ) { 
  this.nom = nom; 
  this.prenom = prenom; 
} 
Personne.prototype.bonjour = function() {  
  alert( "bonjour " + this.prenom ); 
}; 
 
var p1 = new Personne( "brillant", "alexandre" ); 
var p2 = new Personne( "brillant", "alexandre" ); 
alert( p1.bonjour == p2.bonjour ); 

Nous avons bien maintenant deux méthodes identiques avec notre test d’égalité. Plus nous avons d’objets et plus le gain mémoire...

a. Création d’une classe

Prototype masque toute la mécanique de gestion objet. La classe Class sert à la création de vos classes. On passe en argument le corps de la classe (ce qui correspond à notre objet prototype). La méthode initialize correspond au constructeur.

Exemple

var Personne = Class.create( 
{ 
  initialize : function( nom, prenom ) { 
    this.nom = nom; 
    this.prenom = prenom; 
  }, 
  bonjour : function() { 
    alert( "Bonjour " + this.prenom ); 
  } 
}  
); 

Dans notre exemple, nous avons construit une classe Personne prenant en paramètre du constructeur un nom et un prenom. Il y a peu de modifications par rapport au fonctionnement par défaut. Le concept de prototypage est masqué.

b. Héritage

L’héritage se fait simplement en spécifiant la classe parente dans la méthode create. Si vous avez besoin de surcharger une méthode, il vous suffit de réécrire la signature de la méthode en lui ajoutant un premier paramètre $super. Ce dernier contient une référence vers la méthode parente.

Exemple

var Employe = Class.create(  
  Personne, 
  { 
    initialize : function( $super, nom, prenom, poste ) { 
      $super( nom, prenom ); 
      this.poste = poste; 
    }, 
    bonjour : function( $super ) { 
      $super(); 
      alert( "Vous êtes " + this.poste ); 
    } 
  } 
 ); 
 
var p = new Personne( "brillant", "alexandre" ); 
p.bonjour(); 
 
var e = new Employe( "brillant", "alexandre", "developpeur"...