Classes JavaScript
Les classes offrent une syntaxe pour définir des objets avec un constructeur et des méthodes. new crée une instance; la démo affiche finalement tea / regular / mint.
Définir une classe et son constructeur
Le constructeur s'exécute lors de la création d'une instance et initialise ses champs.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
Le constructeur enregistre les valeurs dans le nouvel objet. this désigne l'instance courante et new Drink(...) la crée puis exécute le constructeur.
Ajouter une méthode d'instance
Les méthodes décrivent les actions que les instances peuvent effectuer.
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
const order = new Drink("tea", "regular");
console.log(order.label());
order.label() renvoie tea / regular. Les méthodes de classe sont placées sur le prototype et partagées par les instances.
Étendre une classe
extends établit l'héritage, super(...) appelle le constructeur parent et super.label() utilise la méthode héritée.
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
SpecialDrink hérite de label() et ajoute extra et fullLabel(). Le résultat est tea / regular / mint. Un constructeur dérivé doit appeler super(...) avant d'utiliser this.
Méthodes statiques et champs privés
Une méthode statique appartient à la classe, pas à ses instances. Un champ comme #secret ne se lit qu'à l'intérieur de la classe.
class Drink {
static kind() { return "drink"; }
#secret = "recipe";
reveal() { return this.#secret; }
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Appelle la méthode statique avec Drink.kind(), et non new Drink().kind(). En dehors de la classe, drink.#secret est inaccessible.
Voir les classes dans une page
Cette démo écrit le résultat d'une instance spéciale dans le document.
<p id="result"></p>
<script>
class Drink { constructor(name,size){this.name=name;this.size=size;} label(){return this.name+" / "+this.size;} }
class SpecialDrink extends Drink { constructor(name,size,extra){super(name,size);this.extra=extra;} fullLabel(){return super.label()+" / "+this.extra;} }
const order=new SpecialDrink("tea","regular","mint");
document.querySelector("#result").textContent=order.fullLabel();
</script>
La page affiche exactement tea / regular / mint. Une déclaration de classe n'est pas utilisable avant sa déclaration: c'est la temporal dead zone, et non une affirmation trompeuse sur le hoisting.
Les classes organisent la création et le comportement des objets. Elles diffèrent des modules, qui organisent les fichiers, et d'une méthode écrite directement sur un objet.
📊 Caractéristiques des classes
| Syntaxe | Rôle | Exemple |
|---|---|---|
constructor(...) |
Initialiser une instance | constructor(name, size) |
this |
Désigner l'instance courante | this.name = name |
extends et super |
Réutiliser le comportement parent | class SpecialDrink extends Drink |
static |
Définir une méthode de classe | Drink.kind() |
Le tableau résume la syntaxe de classe essentielle utilisée dans cette leçon.
Exercice pratique
Crée Drink avec name, size et label(). Crée ensuite SpecialDrink avec extends, ajoute extra et fais afficher tea / regular / mint par fullLabel(). Appelle aussi Drink.kind().
Erreurs fréquentes
N'appelle pas une méthode d'instance sur la classe, n'oublie pas super(...) dans le constructeur dérivé et n'utilise pas this avant cet appel.
À retenir
Le constructeur initialise les champs, les méthodes sont partagées via le prototype et l'héritage réutilise le comportement.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut