Objets :Créer une classe Javascript
Un article de WikiTuto.
Sommaire |
Explication
Afin de créer son propre objet (pour l'instancier), certains l'auront deviné, il vous faudra créer une classe. Qu'est-ce que c'est qu'une classe? Une classe d'objets est un ensemble d'informations regroupés sous un même nom, qui décrivent la structure et le comportement commun de ces objets.
Définir une classe
Pour définir une classe, il faut préciser :
- Les propriétés (ou attributs) qui décrivent ses caractéristiques.
- Une propriété est une variable qui est attachée à un type d'objets, et qui est contient une de ses caractéristiques.
- Les méthodes (ou fonctions membres) qui décrivent ses comportements et ses actions
- Une méthode est une fonction qui ne s'applique qu'à une classe d'objet.
Le JavaScript n'est pas un vrai langage orienté objet puisque certains concepts primordiaux ne sont pas implémentés comme le polymorphisme. Les classes en Javascript sont surtout utilisés pour créer des structures de données plus complexes et plus souples que les tableaux de variables.
Grâce à ce système, il devient possible de réunir plusieurs informations ayant un lien entre elles sous le couvert d'un seul mot beaucoup plus rapide à utiliser que de devoir répéter à chaque fois l'ensemble des informations. Donc on peut faire une classe qui regroupe toutes les informations qu'on désire conserver à propos d'un disque compact de musique et ainsi regrouper toutes ces informations dans une seule variable.
Une classe doit contenir un constructeur. Il s'agit d'une fonction qui crée l'objet et lui donne, si nécessaire, ses valeurs à la création (en C++, le constructeur possède une liste d'initialisation). Puis dans la classe il faut donner à l'objet ses propriétés et ses méthodes.
Exemple
<head>
<script language="javascript">
// Constructeur de la classe
function InfosCD(p_titre, p_artiste, p_anneeParution)
{
// Déclaration des variables membres (propriétés)
this.titre = p_titre;
this.artiste = p_artiste;
this.anneeParution = p_anneeParution;
// Déclaration d'une fonction membre (méthode)
this.Artiste = ObtenirArtiste;
}
// Implémentation du code de la fonction membre
function ObtenirArtiste()
{
return this.artiste;
}
</script>
</head>
<body>
<script language="javascript">
// La variable cd est une instance de la classe InfosCD
// Lors de cette déclaration avec le mot clé new, this est "remplacé" par cd
var cd = new InfosCD("Hollywood", "Marilyn Manson", 2000);
document.write(cd.Artiste());
</script>
</body>
Dans cet exemple, le corps de la méthode Artiste() de la classe InfosCD a été défini dans une fonction ObtenirArtiste() externe à la classe, la liaison ayant été faite par la ligne « this.Artiste = ObtenirArtiste; ». L'inconvénient de cette écriture est que l'on ne peut plus définir d'autre fonction ObtenirArtiste() (par exemple, pour une classe InfosChanson pour laquelle il faudrait alors écrire une fonction ObtenirArtiste2() externe à cette classe). Il est donc préférable, pour éviter les conflits de nommage, de définir le corps des méthodes à l'intérieur de la classe considérée :
<script language="javascript">
// Constructeur de la classe
function InfosCD(p_titre, p_artiste, p_anneeParution)
{
// Déclaration des variables membres (propriétés)
this.titre = p_titre;
this.artiste = p_artiste;
this.anneeParution = p_anneeParution;
// Déclaration et implémentation d'une fonction membre (méthode)
this.Artiste = function()
{
return this.artiste;
};
}
</script>
Cependant, dans les deux cas, chaque instance de la classe « embarquera » le corps des méthodes implémentées directement. Afin de rendre les objets plus légers, surtout si la classe est instanciée de nombreuses fois, il est conseillé d'utiliser la propriété prototype décrite plus bas pour rendre ces méthodes partagées par toutes les instances de la classe.
- Pour obtenir un objet, appelé aussi instance de la classe, on utilise une fonction spéciale appelée constructeur et qui porte le nom de la classe. Un objet est alors créé par l'instruction :
var objet = new Classe();
Les valeurs passées en paramètre vont affecter les propriétés de l'instance (et ainsi les initialiser), conformément au code du constructeur : ils doivent donc correspondre exactement, en place et en nombre, aux paramètres formels du constructeur. Mais on peut alternativement appeler le constructeur par défaut, sans paramètre, reportant à plus tard l'initialisation des propriétés.
- Utiliser des fichiers de codes de classes externes .js
- Il est très utile d'insérer le code de nos classes dans des fichiers externes puisqu'elles peuvent resservir ! N'oubliez pas qu'un script externe .js ne contient pas de balises HTML. Pour importer le code, il suffira d'écrire par exemple : <script src="classe_InfosCD.js"></script>
Faites un fichier externe par classe, c'est beaucoup mieux. Il est possible d'écrire dans le code d'une page en plus des définitions locales de fonctions en lien avec les classes importées de fichiers externes.
- La propriété prototype
- Cette propriété spéciale s'applique à une classe déjà construite et permet de lui ajouter de nouvelles propriétés et méthodes. On peut effectuer ces ajouts sur des classes prédéfinies ou définies par le programmeur.
- Comme on ne passe pas par le constructeur de l'objet, il faudra attribuer une valeur aux propriétés ajoutées de cette manière. Voici la syntaxe : nomClasse.prototype.nomPropriété=valeurInitiale;
- Pour l'ajout de méthodes, on dispose là aussi des deux écritures vues ci-dessus, c'est-à-dire soit en liant une fonction écriture par ailleurs, soit en implémentant directement la méthode à l'ajout (écriture préférable pour éviter les conflits de nommage).
- Exemple :
// Ajout à la classe InfosCD d'une propriété style valant "métal" pour toutes les instances
InfosCS.prototype.style = "métal" ;
// Ajout à la classe InfosCD d'une méthode Titre() directement définie
InfosCD.prototype.Titre = function()
{
return this.titre;
} ;
// Ajout à la classe InfosCD d'une méthode AnneParution() par liaison de fonction
InfosCD.prototype.AnneParution = ObtenirAnneeParution ;
//Implémentation du code
function ObtenirAnneParution()
{
return this.anneeParution;
}
- La propriété prototype permet de réaliser l'héritage de classes :
// Classe mère
function ClasseMere() {
this.m = "mère" ;
}
ClasseFille.prototype = new ClasseMere() ;
function ClasseFille() {
this.f = "fille" ;
}
var fille = new ClasseFille() ;
alert( fille.f ) ; // Affiche « fille »
alert( fille.m ) ; // Affiche « mère »
