Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (@plv) Dernière mise à jour : 26 September 2006

Classes et objets en Javascript

Introduction

La programmation orientée objet n'est pas vraiement prévue par Javascript. Dès qu'on entre dans des problématiques du genre créer une classe, faire un héritage,... c'est l'enfer.

Pour l'instant je n'ai trouvé qu'une solution magique, mais elle fait intervenir une librairie javascript en plus (en plus de prototype que j'utilise systématiquement) : la librairie Base.

Créer une classe en JS

En Javascript standard :

function Ctrl() {};
Ctrl.prototype.methode1 = function() {
    alert("appel methode1 et this.var1="+this.var1);
}
Ctrl.prototype.var1 = "var 1";
 
ctrl = new Ctrl();
ctrl.methode1();

Créer un objet d'une classe anonyme

En javascript, on peut créer un objet sans avoir défini de classe :

var ctrl = {
    methode1: function() {
        alert("appel methode1 et this.var1="+this.var1);
    },
    var1: "var 1"
}
ctrl.methode1();

Créer une classe en JS avec prototype

Avec la librairie prototype :

var Ctrl = Class.create();
Ctrl.prototype = {
    initialize: function() {},
    methode1: function() {
        alert("appel methode1 et this.var1="+this.var1);
    },
    var1: "var 1"
}
ctrl = new Ctrl();
ctrl.methode1();

Faire un héritage avec Prototype

On veut que la classe SpecificCtrl hérite de Ctrl.

Avec prototype, il n'y a pas moyen d'avoir accès à une méthode de la classe parente si on surcharge la méthode.

var SpecificCtrl = Class.create();
SpecificCtrl.prototype = Object.extends(
Ctrl.prototype,
{
    initialize: function() {},
    methode1: function() {
        alert("appel methode1 spécifique et this.var1="+this.var1);
    },
    var1: "var 1"
});
ctrl = new SpecificCtrl();
ctrl.methode1();

Créer une classe avec Base

Exemple avec Base version 1.0.2

MyClass = Base.extend ({
    constructor: function() {
    },
    method: function() {
        alert("toto");
    }
});
myInstance = new MyClass()

Faire un héritage avec Base

Avec Base, la syntaxe est assez logique et intuitive, mais surtout, on peut accéder aux méthodes de la classe parente avec un appel à this.base()

MySubClass = MyClass.extend({
  constructor: function() {
    this.base(); // appelle le constructeur de la class parente
  }
  methode1: function() {
    alert("titi");
    this.base();
  }
});
mySubInstance = new MySubClass();
mySubInstance.methode1();
// affiche titi puis toto en popup

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

Navigation