Objets, Classes et Encapsulation
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Pourquoi l'OOP existe
Le problème du code procédural
2. Classe vs Objet
L'analogie du moule et du gâteau
3. Propriétés et Méthodes
Données et comportements
4. Créer une première classe
class Etudiant avec new
5. L'encapsulation
Protéger ses données, exposer des actions
Pourquoi l'OOP ?
Le problème du code procédural qui grossit
L'idée clé
Regrouper données + comportements dans un seul endroit
Classe = moule, Objet = gâteau
L'analogie fondamentale
Première classe en live
class Etudiant avec constructor et méthodes
Un objet protège ses données
Preview de l'encapsulation
Quand le code grossit... 😱
// Des fonctions partout
function getUserName() {}
function getUserEmail() {}
function validateUser() {}
function saveUser() {}
...
// 50+ fonctions! ❌
// Des données séparées
let userName = "Alice";
let userEmail = "[email protected]";
let userAge = 25;
...
// Où sont les données? ❌
⚠️ Problème : Fonctions et données sont séparés
Difficile de savoir quelles fonctions utilisent quelles données
// Un étudiant
let etudiantNom = "Alice";
let etudiantAge = 20;
let etudiantNote = 15;
// Un autre étudiant
let etudiant2Nom = "Bob";
let etudiant2Age = 22;
let etudiant2Note = 12;
// Et encore un...
// etudiant3Nom, etudiant3Age... 😵
❌ Variables éparpillées, noms compliqués, risque d'erreurs
L'objet littéral : regrouper des données
const etudiant = {
nom: "Alice",
age: 20,
note: 15
};
✅ Mieux! Les données sont regroupées
Un seul objet au lieu de 3 variables
const etudiant1 = {
nom: "Alice",
age: 20,
note: 15
};
const etudiant2 = {
nom: "Bob",
age: 22,
note: 12
};
❌ Problème : On répète la même structure!
Et si on veut ajouter une propriété à tous les étudiants?
💡 Il nous faut un moule pour créer des objets similaires
Regrouper données + comportements
Un objet =
Données (ce qu'il a) + Comportements (ce qu'il fait)
📦 Données
Ce que l'objet a
(Propriétés / Attributs)
• nom
• age
• note
⚡ Comportements
Ce que l'objet fait
(Méthodes / Fonctions)
• sePresenter()
• estAdmis()
• augmenterNote()
🎯 L'objet est autonome : il a ses données ET ses actions
📦 Propriétés
• marque: "Toyota"
• couleur: "rouge"
• vitesse: 0
• carburant: 50
⚡ Méthodes
• demarrer()
• accelerer()
• freiner()
• fairePlein()
💡 La voiture a ses propres données ET elle sait quoi faire avec
L'analogie fondamentale
🧁
Classe
Le moule à gâteau
Un plan de construction
🍰
Objet
Le gâteau
Une instance créée
Un moule définit la forme, mais ce n'est pas le gâteau!
class Etudiant {
// Le moule dit : "Chaque étudiant aura..."
nom;
age;
note;
}
📝 La classe est un modèle, pas un objet réel
On ne peut pas "utiliser" la classe directement
new = "Utilise le moule pour créer un gâteau"
const alice = new Etudiant();
const bob = new Etudiant();
const charlie = new Etudiant();
🍰
alice
Un gâteau unique
🍰
bob
Un autre gâteau
🍰
charlie
Encore un autre
Chaque gâteau a ses propres ingrédients!
alice
nom: "Alice"
age: 20
note: 15
bob
nom: "Bob"
age: 22
note: 12
charlie
nom: "Charlie"
age: 19
note: 18
💡 Modifier alice.note ne change PAS bob.note
Tous les gâteaux sont faits avec le même moule!
class Etudiant {
sePresenter() {
return "Je suis " + this.nom;
}
}
alice.sePresenter()
// "Je suis Alice"
bob.sePresenter()
// "Je suis Bob"
✅ Même méthode, mais this.nom est différent pour chaque objet!
class Etudiant
Étape par étape :
1️⃣ Propriétés → 2️⃣ Constructor → 3️⃣ Méthodes
Qu'est-ce qu'un étudiant a?
class Etudiant {
nom;
age;
note;
}
⚠️ Les propriétés sont vides pour l'instant...
On a besoin d'un moyen pour les remplir à la création!
Le constructor = "Ce qui se passe à la création"
class Etudiant {
nom;
age;
note;
constructor(nom, age, note) {
this.nom = nom;
this.age = age;
this.note = note;
}
}
💡 this = l'objet en cours de création
this = "CET objet-là, celui qu'on est en train de créer/manipuler"
const alice = new Etudiant("Alice", 20, 15);
Dans le constructor :
this.nom = "Alice" → alice.nom vaut "Alice"
this.age = 20 → alice.age vaut 20
this.note = 15 → alice.note vaut 15
Qu'est-ce qu'un étudiant peut faire?
class Etudiant {
// ... propriétés et constructor ...
sePresenter() {
return `Je suis ${this.nom}, j'ai ${this.age} ans`;
}
estAdmis() {
return this.note >= 10;
}
}
✅ Les méthodes utilisent this pour accéder aux données de l'objet
class Etudiant {
nom;
age;
note;
constructor(nom, age, note) {
this.nom = nom;
this.age = age;
this.note = note;
}
sePresenter() {
return `Je suis ${this.nom}, j'ai ${this.age} ans`;
}
estAdmis() {
return this.note >= 10;
}
}
🎉 Notre première classe est prête!
// Créer des étudiants
const alice = new Etudiant("Alice", 20, 15);
const bob = new Etudiant("Bob", 22, 8);
// Utiliser les méthodes
alice.sePresenter();
// "Je suis Alice, j'ai 20 ans"
alice.estAdmis();
// true (note >= 10)
bob.estAdmis();
// false (note < 10)
Preview de l'encapsulation
L'objet décide ce qu'il expose et ce qu'il cache
N'importe qui peut modifier les données!
const alice = new Etudiant("Alice", 20, 15);
// Oops! Quelqu'un change la note directement
alice.note = -5; // ❌ Note invalide!
alice.note = 1000; // ❌ Hors limites!
⚠️ Les données sont trop exposées
On verra comment protéger avec private plus tard
L'objet offre des méthodes pour interagir avec ses données
changerNote(nouvelleNote) {
if (nouvelleNote >= 0 && nouvelleNote <= 20) {
this.note = nouvelleNote;
} else {
console.log("Note invalide!");
}
}
❌ alice.note = -5
Accès direct, pas de contrôle
✅ alice.changerNote(-5)
Contrôle, validation
❌ Accès direct
• Ouvrir le capot
• Modifier le moteur
• Toucher aux câbles
Danger! On peut tout casser!
✅ Actions exposées
• Appuyer sur l'accélérateur
• Tourner le volant
• Utiliser les pédales
Sûr! L'interface protège le moteur
🎯 Un objet = une voiture : il expose des actions, pas son moteur interne
❌ Confondre classe et objet
// La classe n'est pas l'objet!
class Etudiant { ... }
const alice = new Etudiant();
✅ Classe = moule, Objet = gâteau créé avec new
❌ Oublier this dans les méthodes
sePresenter() {
return nom;
// ❌ Erreur! nom n'existe pas
return this.nom;
// ✅ Correct!
}
💡 Ne pas surcharger le premier jour
Pas de private, pas d'héritage pour l'instant. On y viendra!
🧁
Classe (Moule)
• Définit la structure
• Définit les méthodes
• C'est un plan, pas un objet
• On ne peut pas l'utiliser directement
🍰
Objet (Gâteau)
• A des données concrètes
• Peut utiliser les méthodes
• C'est une instance
• Créé avec new
🎯 Question : Combien de gâteaux peut-on faire avec un moule?
Réponse : Autant qu'on veut! Chaque gâteau est indépendant.
L'OOP existe pour regrouper données + comportements
Classe
Le moule (le plan)
Objet
Le gâteau (l'instance)
Un objet protège ses données et expose des actions
L'OOP est un outil, pas une religion
On l'utilise quand c'est pertinent!
Classe
Moule qui définit structure + comportements
Objet
Instance créée avec new, données propres
Propriétés
Données (ce que l'objet a)
Méthodes
Comportements (ce que l'objet fait)
🔒 L'objet protège ses données et expose des actions
1. Créer une classe Voiture
Propriétés : marque, couleur, vitesse. Méthode : accelerer()
2. Créer 3 instances de Voiture
Utiliser new et afficher leurs propriétés
3. Ajouter une méthode seGarer()
Qui met la vitesse à 0 et affiche un message
4. Créer une classe CompteBancaire
Propriétés : titulaire, solde. Méthodes : deposer(), retirer()
🧁
Classe = Moule
Définit la structure
🍰
Objet = Gâteau
Instance avec new
📦 Données + ⚡ Comportements = 🎯 Objet autonome
🔒 L'objet protège ses données et expose des actions
L'OOP est un outil puissant pour organiser son code
Prochaine leçon : L'encapsulation avec #private