Aller au contenu | Aller au menu | Aller à la recherche

logo

Alt-I, des informations alternatives

Alt-I est un blog traitant d'informatique généraliste et de cultures alternatives.

Keyword - programmation

Fil des billets - Fil des commentaires

dimanche, 15 juillet 2007

Héritage de classes Javascript

Il est possible aussi de faire hériter une classe d'une autre. Voici comment j'écris monAutreClasse héritée de maClasse :

/**
 * monAutreClasse
 * @extends maClasse
 * @constructor
 */
monProjet.monAutreClasse = function(arg) {
	// Ces deux lignes permettent de récupérer le constructeur de la classe parente
	this.superclass = monProjet.maClasse;
	this.superclass(arg);
	
	// On peut ensuite ajouter de nouvelles variables :
	this.autreVar = "autre chose";
	// A noter que si on veut qu'elles soient disponible dans le init, il faut les placer avant
	// le this.superclass
};
// Ici, on clone le prototype (les méthodes) de la classe parente à la classe enfant
monProjet.monAutreClasse.prototype = new superclass();

// Méthodes publiques
/**
 * Une nouvelle méthode disponible seulement dans monAutreClasse
 */
monProjet.monAutreClasse.prototype.displayAutreVar = function() {
	alert(this.autreVar);
};
/**
 * On redéfinie la méthode toString()
 */
monProjet.monAutreClasse.prototype.toString = function() {
	return "monAutreClasse object";
};


// On peut ensuite apeller les même méthodes que la classe parente
var unSecondObjet = new monProjet.monAutreClasse("kikoo");
monProjet.maClasse.getByVar1("kikoo"); // retourne l'objet "unObjet"
monProjet.maClasse.getByVar1("kikoo").autreMethode(); // Crée une alerte
// mais aussi celles propres à elle même :
unSecondObjet.displayAutreVar();
// Et les méthodes redéfinies :
unSecondObjet.toString(); // retourne "monAutreClasse Object"

Alors ce qui est embêtant, c'est qu'on ne peut pas définir de nouvelles méthodes de prototype directement comme dans l'écriture d'une classe simple. Si j'écrivais monProjet.monAutreClasse.prototype = {…}, toute les méthodes de la classe parente seraient écrasées. Je suis obligé de les nommer les unes après les autres.

À noter aussi que le tableau contenant tout les objets créé n'est pas necessaire. Par contre, on aurait pu avoir un tableau séparé pour cette classe enfante mais il aurait fallu modifier le construteur.

Coder proprement ses classes Javascript

Il existe de nombreuses façons de coder en Javascript. La plus fréquente est malheureusement la plus crade : lister ses fonctions les une après les autres…
Voici comment je code mes classes JS. Il existe peut être de meilleures méthodes mais je trouve celle-ci très propre et très lisible :

var monProjet = {}; // On crée une variable globale du nom du projet
// Ce tableau permettra de stocker et récupérer facilement les objets créés.
//Je lui donne le nom de la classe avec un 's' marquant le pluriel :
monProjet.maClasses = new Array();
/**
 * Classe maClasse : fait des choses.
 */
monProjet.maClasse = function(attr)
{
	// Variable
	this.variable1 = attr;
	
	monProjet.maClasses.push(this);
	this.init();
};
// Méthodes publiques de maClasse
monProjet.maClasse.prototype =
{
	/**
	 * Initialisation, méthode apellée à l'instanciation de l'objet
	 */
	init: function()
	{
		this.variable2 = this.variable1 + 10;
	},
	/**
	 * Autre méthode qui va afficher variable2 dans une alerte
	 */
	autreMethode: function()
	{
		alert(this.variable2);
	},
	/**
	 * Retourne une valeur de l'objet sous forme de chaine
	 */
	toString: function()
	{
		return "maClasse Object";
	}
};
// Méthodes Statiques
/**
 * Une methode statique qui retourne 'yo'
 */
monProjet.maClasse.uneMethodeStatique = function()
{
	return "yo";
};
/**
 * Le genre de méthode statique où on se rends compte de l'utilité du tableau d'objets vu plus haut
 */
monProjet.maClasse.getByVar1 = function(var1)
{
	for (var i = 0; monProjet.maClasses[i]; i++)
	{
		if (monProjet.maClasses[i].variable1 == var1)
		{
			return monProjet.maClasses[i];
		}
	}
	return false;
};

//On peut ensuite créer un objet maClasse et apeller ses méthodes publiques et statiques :

var unObjet = new monProjet.maClasse("youpi");
unObjet.toString(); // retourne "maClasse Object"
monProjet.maClasse.getByVar1("youpi"); // retourne l'objet "unObjet"
monProjet.maClasse.getByVar1("youpi").autreMethode(); // Crée une alerte
…

Nous avons ainsi des classes bien structurées et aucune variable globales (à part la première bien sur) qui pourrait se retrouver écraser par d'autres scripts.

page 2 de 2 -