Les classes en JavaScript · Cours JavaScript avancé

JavaScript aussi a des classes

Depuis 2015 (ES6), JavaScript a le mot-clé class. Si tu as suivi le cours « La POO expliquée simplement », tu retrouves exactement les mêmes idées : propriétés, méthodes, constructeur, héritage. La syntaxe est très proche de PHP ou Java.

class Compte {
  constructor(titulaire) {     // appelé par "new"
    this.titulaire = titulaire;
    this.solde = 0;
  }
  deposer(montant) {           // une méthode
    this.solde += montant;
  }
}

const c = new Compte("Alice");
c.deposer(120);
console.log(c.solde);          // 120

Différence avec PHP : on n'écrit pas $ devant les variables, et on accède aux membres avec un point (c.solde), pas une flèche.

Une seule classe, autant d'instances qu'on veut : chacune a ses données, toutes partagent les mêmes méthodes.

Champs privés avec #

Longtemps JS n'avait pas de vrai privé. Depuis peu, le préfixe # crée un champ réellement privé : inaccessible hors de la classe (encapsulation, comme vu en POO).

class Compte {
  #solde = 0;                  // privé : invisible de l'extérieur
  deposer(m) { if (m > 0) this.#solde += m; }
  get solde() { return this.#solde; }   // accesseur en lecture
}

const c = new Compte();
c.deposer(50);
console.log(c.solde);   // 50  (via le getter)
// c.#solde            // ❌ SyntaxError : champ privé hors de la classe

Le get solde() est un accesseur : on l'utilise comme une propriété (c.solde, sans parenthèses) mais c'est une méthode. Il existe aussi set pour écrire avec validation.

Héritage : extends et super

class CompteEpargne extends Compte {
  constructor(taux) {
    super();              // appelle le constructeur parent (obligatoire avant this)
    this.taux = taux;
  }
  ajouterInterets() {
    this.deposer(this.solde * this.taux);   // réutilise la méthode héritée
  }
}

Et les méthodes statiques (static) appartiennent à la classe, pas à une instance : Compte.creerVide() plutôt que c.creerVide(). Utile pour des fabriques ou des utilitaires.

Essaie (rendu à droite)

Une vraie classe JS qui tourne dans ton navigateur. Modifie-la, clique sur « Exécuter ».

Essaie toi-même

JavaScript has classes too

Since 2015 (ES6), JavaScript has the class keyword. If you took « OOP explained simply », you'll recognize the exact same ideas: properties, methods, constructor, inheritance. The syntax is very close to PHP or Java.

class Compte {
  constructor(titulaire) {     // called by "new"
    this.titulaire = titulaire;
    this.solde = 0;
  }
  deposer(montant) {           // a method
    this.solde += montant;
  }
}

const c = new Compte("Alice");
c.deposer(120);
console.log(c.solde);          // 120

Difference from PHP: no $ before variables, and you access members with a dot (c.solde), not an arrow.

One class, as many instances as you want: each has its own data, all share the same methods.

Private fields with #

For a long time JS had no real privacy. Recently, the # prefix creates a truly private field: unreachable outside the class (encapsulation, as seen in OOP).

class Compte {
  #solde = 0;                  // private: invisible from outside
  deposer(m) { if (m > 0) this.#solde += m; }
  get solde() { return this.#solde; }   // read accessor
}

const c = new Compte();
c.deposer(50);
console.log(c.solde);   // 50  (via the getter)
// c.#solde            // ❌ SyntaxError: private field outside the class

get solde() is an accessor: you use it like a property (c.solde, no parentheses) but it's a method. There's also set to write with validation.

Inheritance: extends and super

class CompteEpargne extends Compte {
  constructor(taux) {
    super();              // calls the parent constructor (required before this)
    this.taux = taux;
  }
  ajouterInterets() {
    this.deposer(this.solde * this.taux);   // reuses the inherited method
  }
}

And static methods (static) belong to the class, not an instance: Compte.creerVide() rather than c.creerVide(). Useful for factories or utilities.

Try it (preview on the right)

A real JS class running in your browser. Edit it, click "Run".

Try it yourself

🎯 Pratique

S'entraîner (clique pour ouvrir) :

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

L'IA propose ce composant Minuteur. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

class Minuteur {
  #secondes = 0;
  demarrer() {
    setInterval(function () {
      this.#secondes++;            // incrémente chaque seconde
      console.log(this.#secondes);
    }, 1000);
  }
}
new Minuteur().demarrer();

Rejeter : ce code plante. La function classique passée à setInterval a son propre this (ici undefined en mode module, ou l'objet global ailleurs), pas l'instance. À la première seconde, this.#secondes lève une erreur car le champ privé n'existe pas sur cet objet. Correctif : une fonction fléchée () => { this.#secondes++; }, qui capture le this de demarrer(). C'est exactement la fuite de this annoncée pour la leçon suivante : les classes ne lient pas this toutes seules.

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : qu'est-ce qui est partagé par toutes les instances d'une classe et qu'est-ce qui est propre à chacune ? Et à quoi sert le préfixe # sur un champ ?

Les méthodes (et le constructeur) sont écrites une seule fois et partagées par toutes les instances ; les données posées sur this dans le constructeur (ex. this.titulaire, le #solde) sont propres à chaque objet créé avec new. Le préfixe # rend un champ réellement privé : il n'est lisible ni modifiable hors de la classe (c.#solde hors classe est une SyntaxError), d'où l'usage d'un getter get solde() pour le lire.

Comment déclare-t-on un champ vraiment privé dans une classe JS moderne ?

private solde Avec un # : #solde En le préfixant de _

Dans un constructeur d'une classe enfant, que fait super() ?

Rien d'utile Il supprime le parent Il appelle le constructeur du parent (requis avant d'utiliser this)

Prochaine étape

Les classes JS cachent un piège que tous les débutants rencontrent : le mot this qui se perd. Et au fond, les classes ne sont que du sucre sur les prototypes. On démonte tout ça dans la leçon suivante.

Leçon 2 : this et prototypes →