La programmation orientée objet en JavaScript vous semble compliquée ? Vous avez entendu parler des classes mais vous ne savez pas par où commencer ? Depuis ES6 (ECMAScript 2015), les classes ont changé la donne en rendant le code plus clair et mieux organisé.
Cet article vous montre comment utiliser les classes JavaScript, même si vous partez de zéro. Vous apprendrez à créer des objets de manière simple et structurée, en passant de la syntaxe de base jusqu’à des concepts comme l’héritage.
Qu’est-ce qu’une `class` en JavaScript ? Le concept expliqué simplement
Imaginez une classe comme un plan de construction ou un moule à gâteaux. Le plan vous dit comment construire la maison, mais ce n’est pas la maison elle-même. De même, une classe est un modèle (`blueprint`) qui définit comment créer des objets, mais ce n’est pas l’objet final.
Avant ES6, on utilisait des fonctions et des prototypes pour faire ça. C’était fonctionnel, mais pas très lisible. Les classes sont ce qu’on appelle du « sucre syntaxique ». Ce n’est pas une nouvelle fonctionnalité de fond, mais une façon plus simple et plus propre d’écrire ce qui existait déjà : l’héritage prototypal. Pour un développeur qui vient de Java ou C#, cette syntaxe est beaucoup plus familière.
Les avantages sont clairs :
- Votre code est plus structuré et plus facile à lire.
- La maintenance est simplifiée.
- Vous adoptez les bonnes pratiques de la programmation orientée objet (POO).
La Syntaxe Fondamentale : Déclarer votre Première Classe
Passons à la pratique. Créer une classe se fait en trois étapes : la déclaration avec le constructeur, l’ajout de méthodes et l’instanciation.
La déclaration de classe et la méthode `constructor()`
On déclare une classe avec le mot-clé class, suivi de son nom. À l’intérieur, on trouve une méthode spéciale : le constructor(). Cette méthode est appelée automatiquement quand vous créez un nouvel objet à partir de la classe. C’est là que vous initialisez les propriétés de l’objet.
Le mot-clé this fait référence à l’instance de l’objet qui sera créée. Par exemple, this.marque crée une propriété « marque » sur le nouvel objet.
// On active le 'strict mode' pour un code plus propre
'use strict';
class Voiture {
// Le constructor est une méthode spéciale pour créer et initialiser un objet
constructor(marque, annee) {
this.marque = marque;
this.annee = annee;
}
}Voici comment créer une `class Rectangle` avec un `constructor` qui prend `height` et `width` (hauteur et largeur). Le `class constructor` est la base de tout.
const Rectangle = class {
// class constructor height width
constructor(height, width) {
this.height = height;
this.width = width;
}
};Ajouter des méthodes à une classe
Une méthode est simplement une fonction qui appartient à la classe. Elle peut utiliser les propriétés de l’objet (via this) pour effectuer des actions. Les méthodes se déclarent directement dans le corps de la classe, après le constructor.
Ajoutons une méthode presenter() à notre classe Voiture. Cette méthode va retourner une chaîne de caractères qui décrit la voiture.
class Voiture {
constructor(marque, annee) {
this.marque = marque;
this.annee = annee;
}
// Ajout d'une méthode
presenter() {
return `Cette voiture est une ${this.marque} de ${this.annee}.`;
}
}Instancier un objet : donner vie à votre classe
Maintenant que notre plan (la classe) est prêt, on peut créer des objets. C’est ce qu’on appelle « instancier une classe ». Pour ça, on utilise le mot-clé new suivi du nom de la classe et des arguments pour le constructeur.
Chaque appel à new crée un nouvel objet indépendant, avec ses propres valeurs de propriétés, mais partageant les mêmes méthodes définies dans la classe.
// On crée deux instances différentes de la classe Voiture
const maClio = new Voiture('Renault', 2021);
const maPeugeot = new Voiture('Peugeot', 2023);
console.log(maClio.presenter()); // Affiche "Cette voiture est une Renault de 2021."
console.log(maPeugeot.presenter()); // Affiche "Cette voiture est une Peugeot de 2023."
// On crée une instance de Rectangle
const monRectangle = new Rectangle(10, 20); // height: 10, width: 20Concepts Avancés pour Maîtriser les Classes
Une fois la base acquise, vous pouvez explorer des fonctionnalités plus puissantes qui rendent les classes encore plus utiles.
L’héritage avec `extends` et `super()`
L’héritage permet de créer une nouvelle classe (la classe « enfant ») qui reprend les propriétés et méthodes d’une classe existante (la classe « parent »). C’est très utile pour éviter de répéter du code.
On utilise le mot-clé extends pour créer la filiation. Dans la classe enfant, si on définit un constructor, il faut appeler super() en premier. La méthode super() exécute le constructeur de la classe parent, ce qui permet à l’enfant d’hériter correctement de ses propriétés.
// Classe parent
class Vehicule {
constructor(marque) {
this.marque = marque;
}
rouler() {
return 'Le véhicule roule.';
}
}
// Classe enfant qui hérite de Vehicule
class Moto extends Vehicule {
constructor(marque, cylindree) {
// Appel obligatoire du constructeur parent
super(marque);
this.cylindree = cylindree;
}
}
const maMoto = new Moto('Honda', 500);
console.log(maMoto.marque); // Affiche "Honda" (hérité de Vehicule)
console.log(maMoto.rouler()); // Affiche "Le véhicule roule." (méthode héritée)Les méthodes et propriétés statiques (`static`)
Une méthode static est une méthode qui appartient directement à la classe, et non à une instance de la classe. Vous ne pouvez pas l’appeler sur un objet créé avec new. On les utilise souvent pour des fonctions utilitaires liées à la classe.
Par exemple, une méthode pour comparer deux voitures n’a pas besoin d’être liée à une voiture en particulier. On l’appelle directement sur la classe : Voiture.comparer(...).
class Calcul {
// Cette méthode est liée à la classe Calcul, pas à une instance
static addition(a, b) {
return a + b;
}
}
// On l'appelle directement sur la classe
const resultat = Calcul.addition(5, 3);
console.log(resultat); // Affiche 8Getters et Setters pour contrôler l’accès aux propriétés
Les getters (`get`) et setters (`set`) permettent de contrôler comment on lit et modifie les propriétés d’un objet. Un `get` sert à récupérer la valeur d’une propriété, et un `set` à la définir, souvent en y ajoutant une logique de validation.
C’est utile pour s’assurer que les données restent cohérentes. Par exemple, on peut empêcher qu’un âge soit négatif.
class Utilisateur {
constructor(nom) {
this.nom = nom;
this._age = 0; // Propriété privée par convention avec "_"
}
// Getter pour lire l'âge
get age() {
return this._age;
}
// Setter pour modifier l'âge avec validation
set age(nouvelAge) {
if (nouvelAge > 0) {
this._age = nouvelAge;
} else {
console.log('L\'âge doit être positif.');
}
}
}
const user = new Utilisateur('Alice');
user.age = 25; // Utilise le setter
console.log(user.age); // Utilise le getter, affiche 25
user.age = -5; // Affiche "L'âge doit être positif."Classes vs Prototypes : Le Match Visuel
Pour bien comprendre l’avantage des classes, rien de tel qu’une comparaison directe. Les classes ne sont qu’une simplification de la syntaxe basée sur les prototypes. Le tableau ci-dessous montre le même code écrit des deux manières. La version avec class est bien plus compacte et lisible.
| Concept | Syntaxe avec class (ES6+) |
Syntaxe avec Prototypes (Pré-ES6) |
|---|---|---|
| Déclaration | class User { |
function User(name) { |
| Ajout de méthode | class User { |
User.prototype.sayHi = function() { |
| Héritage | class Admin extends User { |
function Admin(name, rights) { |
FAQ – Questions Fréquentes sur les Classes JavaScript
Voici quelques réponses aux questions courantes sur les classes en JavaScript.
Quelle est la différence entre une classe et un objet ?
C’est la différence entre la recette et le gâteau. La classe est la recette (le plan, le modèle). L’objet est le gâteau que vous avez préparé en suivant la recette (l’instance créée). Vous pouvez faire plusieurs gâteaux (objets) à partir d’une seule recette (classe).
Les classes JS sont-elles de la « vraie » programmation orientée objet ?
Pas tout à fait. JavaScript reste un langage basé sur les prototypes. Les classes sont une couche d’abstraction par-dessus ce système. Pour un développeur, ça ressemble à de la POO classique, mais sous le capot, le moteur JavaScript manipule toujours des prototypes. La spécification ECMAScript, comme celle de 2015 ou les futures, continue de construire sur cette base.
Dois-je toujours utiliser des classes ?
Non, pas forcément. Pour des structures de données complexes qui ont un comportement défini (des méthodes) et dont vous allez créer plusieurs instances, les classes sont une excellente solution. Pour un simple regroupement de données sans comportement, un objet littéral (const data = { ... }) est souvent suffisant et plus simple.
Comment fonctionnent les champs privés (`#`) ?
Plus récemment, JavaScript a introduit une manière de créer des champs vraiment privés en utilisant le préfixe #. Une propriété déclarée avec # (par exemple #age) n’est accessible qu’à l’intérieur de la classe elle-même. C’est une protection plus forte que la convention du tiret bas (_age).
class Personne {
// Ce champ est privé
#secret = 'Mon secret';
reveler() {
// Accessible ici
console.log(this.#secret);
}
}
const p = new Personne();
p.reveler(); // Affiche "Mon secret"
// console.log(p.#secret); // Erreur ! Impossible d'y accéder de l'extérieur
