06

Modules & Classes

POO avec class, import/export ES6, JSON, gestion d'erreurs avancée

← Accueil

1 Classes JavaScript

class Animal {
  // constructor : appelé automatiquement à new Animal(...)
  constructor(nom, age) {
    this.nom = nom;   // propriété de l'instance
    this.age = age;
  }

  // Méthode
  parler() {
    return `${this.nom} fait un bruit.`;
  }

  // Getter (accès sans parenthèses)
  get description() {
    return `${this.nom} (${this.age} ans)`;
  }
}

const chat = new Animal("Milo", 3);
console.log(chat.nom);         // "Milo"
console.log(chat.parler());    // "Milo fait un bruit."
console.log(chat.description); // "Milo (3 ans)"
Erreur fréquente :
class Truc {
  valeur = 10;
  doubler() {
    return valeur * 2;       // ❌ ReferenceError
    return this.valeur * 2;  // ✅ toujours this.
  }
}

2 Héritage avec extends

class Chien extends Animal {
  constructor(nom, age, race) {
    super(nom, age); // OBLIGATOIRE — appelle le constructor parent
    this.race = race;
  }

  // Surcharge la méthode parent
  parler() {
    return `${this.nom} aboie : Woof !`;
  }

  // Nouvelle méthode propre à Chien
  fetch() {
    return `${this.nom} rapporte la balle !`;
  }
}

const rex = new Chien("Rex", 5, "Berger Allemand");
console.log(rex.parler());          // "Rex aboie : Woof !"
console.log(rex.description);       // "Rex (5 ans)" ← hérite du getter
console.log(rex instanceof Animal); // true

3 Méthodes & propriétés statiques

class MathUtil {
  static PI = 3.14159; // propriété de classe, pas d'instance

  static aire(rayon) {
    return MathUtil.PI * rayon ** 2;
  }
}

console.log(MathUtil.aire(5)); // 78.53...
// pas besoin de new MathUtil()

4 Modules ES6 — import / export

Nécessite un serveur (Live Server VS Code) ou type="module" dans le HTML.

Exporter :

// utils.js
export const PI = 3.14159;

export function additionner(a, b) {
  return a + b;
}

export default class Calculatrice {
  // ...
}

Importer :

// main.js
import Calculatrice, { PI, additionner } from './utils.js';

console.log(PI);                // 3.14159
console.log(additionner(2, 3)); // 5
const calc = new Calculatrice();
💡 Règle : une seule export default par fichier, autant de export nommés que voulu.

5 JSON

// Objet JS → chaîne JSON (pour stocker ou envoyer)
const user = { nom: "Alice", age: 30 };
const json = JSON.stringify(user);
// '{"nom":"Alice","age":30}'

// Chaîne JSON → objet JS
const userReconstitue = JSON.parse(json);
console.log(userReconstitue.nom); // "Alice"

// Formatage lisible (pour debug)
console.log(JSON.stringify(user, null, 2));
Erreur fréquente :
JSON.stringify(undefined); // undefined (pas de chaîne !)
JSON.parse("undefined");   // SyntaxError !
JSON.parse(null);          // null ← OK

6 Gestion d'erreurs avancée

// Créer sa propre classe d'erreur
class ValidationError extends Error {
  constructor(message, champ) {
    super(message);
    this.name = "ValidationError";
    this.champ = champ;
  }
}

function validerAge(age) {
  if (typeof age !== 'number') {
    throw new ValidationError("L'âge doit être un nombre", "age");
  }
  if (age < 0 || age > 150) {
    throw new ValidationError("Âge hors limites", "age");
  }
  return true;
}

try {
  validerAge("vingt");
} catch (err) {
  if (err instanceof ValidationError) {
    console.log(`Champ "${err.champ}" invalide : ${err.message}`);
  } else {
    throw err; // relancer si ce n'est pas notre erreur
  }
}

Résumé rapide

ConceptUsage
classcréer un blueprint d'objet
constructorinitialiser les propriétés
extends + superhéritage
staticméthode/propriété de classe
export / importmodulariser le code
JSON.stringify/parsesérialisation
class MyError extends Errorerreurs personnalisées
🏗️

Mini-Projet

Conçois une application orientée objet avec classes, héritage et modules ES6.

Exercices & Solutions

Télécharge les fichiers, ouvre-les dans ton éditeur et travaille directement dedans.

📝 exercices.js

4 exercices sur les classes, héritage, JSON et les classes d'erreurs custom.

🟢 ×1 Facile 🟡 ×2 Moyen 🔴 ×1 Difficile
⬇ Télécharger
solutions.js

Corrections complètes. À consulter après avoir essayé.

Corrigé complet Best practices
⬇ Télécharger
🧠 Tester mes connaissances