Créer classe avec prototype JS

Nous avons vu qu'il était possible de créer des classes en Javascript sans utiliser de framework addtionnel, il est cependant relativement pénible d'utiliser pleinement les fonctionnalités de la programmation orientée objet sansl'ajout d'un framework. Il en existe beaucoup, le plus abouti nous semble être prototypejs.

Présentation du framework Prototype

Prototypejs est un framework javascript utilisé pour faciliter le développement d'application web dynamiques côté client. Outre les fonctionnalités avancées (telles qu'ajax, les collections...), prototypeJS permet de créer des classes, et de bénéficier des fonctionnalités plus avancées de la programmation orientée objet (POO).

Création d'une classe

La création d'une classe est un peu plus verbeuse, prennons l'exemple classique de la classe Vehicule :

var Vehicule  = Class.create({
    //Constructeur
    initialize:function(modele,annee)
    {
        this.modele = modele;
        this.annee = annee;
        this.type = 'generique' ;
    },
    //méthode simple
    display:function()
    {
        document.write(this.type+" : "+this.modele+" "+this.annee+"<br>");    
    },
    pedaler:function()
    {
        document.write("Je ne suis pas capable de p&eacute;daler<br><br>");    
    }
});

La méthode constructeur s'appelle nécessairement initialize, on peut ensuite définir toutes les méthodes que l'on souhaite.

Héritage et polymorphisme en Javascript

L'héritage est certainement la grosse valeur ajoutée de l'utilisation d'un framework : étendons désormais la classe Vehicule en créant la classe Velo :

//class Velo héritant de la classe véhicule
var Velo = Class.create(Vehicule,{
    
    initialize: function($super, modele, annee) 
    {
        this.modele = modele;
        this.annee = annee;
        this.type = 'velo' ;
    },
    pedaler:function()
    {
        document.write("&Ccedil;a roule !<br><br>");    
    }
});

Inutile de redéfinir la méthode display(), Velo en hérite directement de sa classe mère Vehicule.

Instanciation et appel de méthode

Utilisation du mot clé new pour instancier, notation pointée pour l'appel de méthode, relativement classique.

var oVehicule = new Vehicule();
oVehicule.display();

Remarques

Sans permettre les fonctionnalités avancées de la POO classique (visibilité des attributs, modificateurs d'accès, multi-constructeurs, héritage multiple, abstractions, mot clé final...), mais il permet tout de même de concevoir raisonnablement des applications à destination des clients web riches.

Télécharger l'exemple

Cette archive contient :

• Le framework prototypejs version 1.6.0.3 stable
• Les classes Vehicule et Velo
• Une page web ou elles sont utilisées

Articles connexes

• POO : Créer une classe en Javascript sans framework