🎩 Les Classes JavaScript

Programmation Orientée Objet avec JavaScript Moderne

(— Une édition spéciale qui fait tomber amoureux même ceux qui disent “L’OOP c’est ennuyant” 🫶)

Pendant des années, JavaScript se promenait en disant :
« Je suis basé sur les prototypes, je n’ai pas de classes, habituez-vous à moi comme ça. »

Mais ensuite ES6 est arrivé et lui a dit :

« Personne ne te comprend comme ça. Donnons-toi une vraie structure de classe. »

Et à partir de ce moment-là, les bibliothèques, frameworks et moteurs de jeu JavaScript sont devenus beaucoup plus organisés.

Aujourd’hui, ensemble, nous allons apprendre :

• Qu’est-ce qu’une classe ?
• À quoi sert le constructor ?
• Que font les méthodes, getters et setters ?
• Comment fonctionne l’héritage ?
• À quoi sert static ?
• Comment utiliser les champs privés ?
• Comment créer des exemples réalistes (comme des personnages de jeu) ?
• Quels sont les conseils professionnels ?

On va tout apprendre d’une manière fun, charmante et ultra éducative.

Allons-y bébé. 🤌💛

💛 1) Qu’est-ce qu’une Classe ?

(Quand tu comprends ça, tout le reste devient logique)

Une classe = un modèle pour créer des objets.
Pense à une recette avec laquelle tu fais plusieurs gâteaux.

Recette → classe
Chaque gâteau → instance (objet)

Tu peux créer des objets avec des fonctions en JavaScript,
mais les classes rendent tout :

• Plus organisé
• Plus lisible
• Plus orienté objet
• Plus professionnel

🔧 Une classe simple :

class Player {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }
}

Mais c’est trop basique…
On va le turbo-charger. 💨

💛 2) constructor() : La Naissance de l’Objet

Le constructor = la fonction qui s’exécute au moment où l’objet naît.

Il :

• Définit les valeurs par défaut
• Initialise les propriétés
• Crée l’identité de l’objet

Exemple :

class Player {
  constructor(name, level = 1, hp = 100) {
    this.name = name;
    this.level = level;
    this.hp = hp;
  }
}

const hero = new Player("Cansu", 42);
console.log(hero);

💡 Astuce Pro :

Tu dois utiliser this dans un constructor.
this → représente le nouvel objet créé.

Si tu demandes « Mais c’est qui this ? »,
c’est comme la main qui tient ton café… mais dans le code 😌

💛 3) Méthodes : Les Super-Pouvoirs de l’Objet

Une méthode = une fonction définie dans une classe.

Pense à un personnage de jeu :
Il a des capacités comme :

• attack()
• run()
• speak()
• castSpell()

Ce sont des méthodes.

Exemple :

class Player {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }

  greet() {
    console.log(`Salut ! Je suis ${this.name}, niveau ${this.level} 💥`);
  }
}

Chaque joueur peut parler dès sa naissance. Trop mignon 😌

💡 Astuce Pro :
Les méthodes sont stockées une seule fois en mémoire, ce qui est très efficace.

💛 4) Héritage :

« Qui es-tu mon fils ? Je suis ta classe ancêtre ! »

Certaines classes veulent récupérer les fonctionnalités d’autres classes.

Exemple :
Animal → Dog

Chaque chien est un animal
Les animaux peuvent respirer
Les chiens peuvent respirer et aboyer

class Animal {
  breathe() {
    console.log("Je respire...");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Ouaf ouaf ! 🐶");
  }
}

const dog = new Dog();
dog.breathe();
dog.bark();

💡 Astuce Pro :
L’héritage = une épée magique qui tue le code dupliqué dans les grands projets.

💛 5) super() :

Le moment où tu dois appeler ton père

Une classe enfant utilise super() pour accéder au constructor du parent.

class Character {
  constructor(name) {
    this.name = name;
  }
}

class Mage extends Character {
  constructor(name, mana) {
    super(name);
    this.mana = mana;
  }
}

super → comme un enfant riche qui accède au compte bancaire de son père 😌

💛 6) Getter & Setter : Les Portes de Sécurité des Données

Getter → intercepte la lecture
Setter → intercepte la modification

Cela permet :

• De formater les données
• De valider les entrées
• D’éviter les erreurs

class Player {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name.toUpperCase();
  }

  set name(newName) {
    if (newName.length < 2) {
      throw new Error("Nom trop court");
    }
    this._name = newName;
  }
}

const p = new Player("Cansu");
console.log(p.name);
p.name = "Queen";
console.log(p.name);

💛 7) Méthodes Static :

Les fonctions qui n’ont pas besoin d’objet

class MathUtils {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(8));

Utilisation :

• Fonctions utilitaires
• Calculs
• Formatage

💛 8) Champs Privés (#) :

Des secrets bien cachés

Avec ES2022, tu peux créer de vrais champs privés :

• Inaccessibles depuis l’extérieur
• Sécurisés
• Parfaits pour les données sensibles

class Bank {
  #balance = 1000;

  showBalance() {
    console.log(`Solde : ${this.#balance}₺`);
  }
}

acc.#balance → ❌ erreur !

💛 9) Mini Projet Réaliste :

Système de Personnages RPG

class Character {
  constructor(name, strength, hp) {
    this.name = name;
    this.strength = strength;
    this.hp = hp;
  }

  attack() {
    console.log(`${this.name} attaque avec une force de ${this.strength} 💥`);
  }

  status() {
    console.log(`${this.name} | Force : ${this.strength} | HP : ${this.hp}`);
  }
}

class Mage extends Character {
  constructor(name, strength, hp, mana) {
    super(name, strength, hp);
    this.mana = mana;
  }

  castSpell() {
    console.log(`${this.name} lance un sort ! ✨ Mana : ${this.mana}`);
  }
}

class Warrior extends Character {
  constructor(name, strength, hp, armor) {
    super(name, strength, hp);
    this.armor = armor;
  }

  defend() {
    console.log(`${this.name} se défend avec une armure de ${this.armor} 🛡️`);
  }
}

const merlin = new Mage("Merlin", 50, 80, 120);
const thor = new Warrior("Thor", 80, 200, 50);

merlin.castSpell();
thor.defend();
merlin.attack();
thor.status();

Tu peux déjà faire un mini-jeu avec cette structure.

💛 10) Conseils Professionnels

🔥 1. Garde les classes petites
Une classe = une seule responsabilité.

🔥 2. Utilise les champs privés (#)
Pour tout ce qui touche aux données sensibles.

🔥 3. Utilise les méthodes static pour les utilitaires
Ton code deviendra merveilleusement propre.

🔥 4. Ne surcharge pas l’héritage
La composition est parfois meilleure.

🔥 5. Pas de fonctions fléchées dans les classes
Elles détruisent le binding de this.

💛 Conclusion :

Tu es maintenant un·e maître des Classes JS, bébé !

Tu sais :

✔ comprendre les classes modernes
✔ utiliser l’héritage
✔ écrire getters & setters
✔ utiliser les champs privés
✔ construire des exemples professionnels

Tu es officiellement un·e sorcier·ère JavaScript de haut niveau 🧙‍♀️✨