Les classes ont été introduites récemment en JavaScript (avec ECMAScript 2015) pour fournir une syntaxe plus simple pour créer des objets et manipuler l'héritage. En réalité l'objectif était de masquer l'héritage prototypal du langage pour les développeurs habitués aux langages objets basés sur les classes.

Il faut bien comprendre que malgré cette évolution, le JavaScript reste un langage objet basé sur les prototypes et que toute classe est convertie au final en un objet prototype.

Quelques rappels sur les classes

Une classe est une entité qui va servir à créer des objets de même type. Elle va généralement être composée de propriétés (on parle aussi d'attributs dans d'autres langages) et de méthodes dont vont hériter les objets qui seront créés à partir de celle-ci.

Une classe va également posséder un constructeur qui sera appelé systématiquement lors de la création d'un objet pour permettre notamment d'initialiser les propriétés de cet objet.

Dans les langages objet basés sur les classes :

• Tous les objets sont créés en instanciant des classes,
• Une classe contient toutes les définitions des propriétés et des méthodes dont va disposer l'objet. La possibilité de rajouter ou de supprimer des membres à un objet n'existe pas,
• L'héritage se fait au niveau des classes, en définissant une classe mère et des classes filles qui seront des spécialisations (ou des extensions) de la classe mère.

Déclaration et instanciation d'une classe

Pour déclarer une classe en JavaScript, on utilise le mot clé class suivi du nom de la classe et d'une paire d'accolades.

Exemple : déclaration de la classe Personne

class Personne {

}

On ajoute ensuite dans cette classe la méthode constructor(). Cette méthode est reconnue par JavaScript comme étant le constructeur de la classe, elle servira notamment à créer les objets et à initialiser leurs propriétés grâce au passage de paramètres.

Exemple : codage du constructeur de la classe Personne

class Personne {
    constructor(nom, prenom, age) {
        this.nom = nom;
        this.prenom = prenom;
        this.age = age;
    }
}

A noter que contrairement au cas des langage objet basés sur les classes (comme C++ ou Java), les propriétés ne sont pas définies à part comme des attributs mais directement dans le constructeur en utilisant le mot clé this pour désigner l'objet courant.

Il reste alors à ajouter les méthodes auxquelles les objets devront pouvoir avoir accès.

Exemple : ajout de la méthode decrire() dans la classe Personne

class Personne {
    constructor(nom, prenom, age) {
        this.nom = nom;
        this.prenom = prenom;
        this.age = age;
    }

    decrire() {
        let description;
        description = `${this.prenom} ${this.nom} est agé de ${this.age} ans.`;
        
        return description;
    }
}

Instanciation & création d'un objet

Après avoir défini complétement la classe, on l'instancie pour créer un objet. Pour cela :

• on déclare une variable à laquelle on affecte l'objet créé à partir de la classe
• on utilise le mot clé new suivi du nom de la classe pour faire l'instanciation
• on passe en paramètre les valeurs avec lesquelles les propriétés de l'objet seront initialisées.

Exemple : instanciation de la classe Personne

let objPersonne = new Personne('Reese', 'John', 30);

À partir de cet instant, toutes les méthodes définies dans la classe sont accessibles pour l'objet qui a été créé à partir de cette classe.

Exemple : utilisation de la méthode decrire() avec l'objet objPersonne

console.log(objPersonne.decrire());

Activité : codage d'une classe pour l'application de calcul de l'IMC

Créer une nouvelle version de l'application de calcul d'IMC en utilisant une classe Patient pour créer les objets qui représentent un patient. Cette classe sera définie avec les mêmes propriétés et méthodes que celles définies pour les objets de la version précédente.

Tester la classe en créant 2 patients et en affichant pour chacun d'entre-eux :

• Leur description,
• Leur IMC,
• Leur état de corpulence.

Le programme doit être conforme à l'exemple donné pour la version précédente.

Classes dérivées et héritage

Pour créer une classe dérivée qui va hériter des propriétés et des méthodes d'une autre classe, on doit utiliser le mot clé extends

Exemple : création d'une classe Professeur qui hérite de la classe Personne

class Professeur extends Personne {

}

Dans le cas de cet exemple, on dit que la classe Professeur est une classe dérivée de la classe Personne ou encore que la classe Personne est la classe mère de la classe Professeur.

Dans le constructeur de la classe dérivée, il faut utiliser le mot clé super pour appeler le constructeur de la classe mère.

Exemple : codage du constructeur de la classe Professeur

class Professeur extends Personne {
    constructor(nom, prenom, age, matiere) {
        super(nom, prenom, age);  // Appel du constructeur de la classe Personne
        this.matiere = matiere;
    }
}

Dans cet exemple, lorsqu'on créée un objet de la classe Professeur, les propriétés nom, prenom et age sont initialisés par le constructeur de la classe Personne, la propriété matiere spécifique à la classe Professeur est initialisée directement par le constructeur de cette classe.

Attention : super() doit toujours être utilisé avant le mot clé this.

Activité : implémentation de l'héritage par classes pour gérer les professeurs et les élèves

Créer une nouvelle version de l'application qui permet de créer des objets représentant des professeurs ou des élèves en utilisant l'héritage par classe.

Pour cette version, on implémentera :

• La classe Professeur à partir de laquelle seront créés les objets représentant les professeurs,
• La classe Eleve à partir de laquelle seront créés les objets représentant les élèves.

Ces deux classes seront dérivées de la classe Personne qui sera chargée d'initialiser les propriétés communes aux professeurs et aux élèves.

Coder les instructions javascript qui permettent de définir :

• La classe Personne telle qu'elle a été définie dans le cours,
• La classe Professeur en reprenant l'exemple du cours et en ajoutant la méthode decrire_plus() telle qu'elle a été implémentée dans la version précédente (cf. héritage par prototype),
• La classe Eleve selon les mêmes modalités que la classe Professeur

Ajouter les instructions qui permettent de créer un objet de chaque type (Professeur et Eleve) à partir de ces classes et de tester les méthodes decrire() et decrire_plus() sur chacun de ces objets.

Exercice

Pour voir si tu as bien compris le fonctionnement des classes, n'hésite-pas à t'entrainer de ton côté avec les exercices proposés ci-dessous. Prends ton éditeur préféré, créé un nouveau projet contenant un fichier HTML et JavaScript et c'est parti !

Dans cet exercice, il s'agit de reprendre l'application vue dans le chapitre sur les objets et qui permet de créer des objets représentant les personnages d'un jeu. L'objectif sera d'en faire une nouvelle version dans laquelle ces objets seront créés en utilisant les classes.

Créer un nouveau projet correspondant à cette nouvelle version et coder les instructions qui permettent de :

• Définir correctement les classes nécessaires à la création des personnages,
• Créer des objets représentant un personnage de chaque catégorie,
• Tester les méthodes associées à chacun de ces objets.