Comprendre la POO sous Javascript

Rappelons nous des concepts fondamentales de la POO sous Javascript

March 1, 2025
4 min read

La Programmation Orientée Objet (POO) en JavaScript

La programmation orientée objet (POO) en JavaScript repose sur des concepts fondamentaux comme les objets, les classes, l’héritage, l’encapsulation et le polymorphisme. JavaScript étant un langage flexible, il supporte la POO de plusieurs manières : via des objets littéraux, des fonctions constructrices, ou encore via l’approche moderne avec class (introduite avec ES6).

1. Les objets en JavaScript

Un objet est une structure contenant des propriétés (variables) et des méthodes (fonctions).

Création d’un objet littéral

const utilisateur = {
  nom: "Alice",
  age: 25,
  sePresenter: function () {
    console.log(`Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`);
  }
};

// Utilisation
utilisateur.sePresenter();

🔹 this fait référence à l’objet courant.

2. Les fonctions constructrices

Avant ES6, JavaScript utilisait des fonctions constructrices pour créer plusieurs objets similaires.

function Utilisateur(nom, age) {
  this.nom = nom;
  this.age = age;
  this.sePresenter = function () {
    console.log(`Bonjour, je suis ${this.nom}, j'ai ${this.age} ans.`);
  };
}

// Instanciation
const user1 = new Utilisateur("Alice", 25);
const user2 = new Utilisateur("Bob", 30);

user1.sePresenter();
user2.sePresenter();

🔹 new Utilisateur("Alice", 25) crée une nouvelle instance de Utilisateur.

3. Utilisation des `prototype`

Le problème avec les fonctions constructrices est que chaque instance possède sa propre copie des méthodes. Une meilleure approche est d’utiliser prototype pour partager des méthodes entre instances.

function Utilisateur(nom, age) {
  this.nom = nom;
  this.age = age;
}

Utilisateur.prototype.sePresenter = function () {
  console.log(`Bonjour, je suis ${this.nom}, j'ai ${this.age} ans.`);
};

// Instanciation
const user1 = new Utilisateur("Alice", 25);
const user2 = new Utilisateur("Bob", 30);

user1.sePresenter();
user2.sePresenter();

🔹 Utilisateur.prototype.sePresenter permet d’économiser de la mémoire en évitant de dupliquer la méthode pour chaque instance.

4. L’approche moderne avec `class` (ES6)

Avec ES6, JavaScript introduit class qui simplifie la création d’objets et l’héritage.

class Utilisateur {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }

  sePresenter() {
    console.log(`Bonjour, je suis ${this.nom}, j'ai ${this.age} ans.`);
  }
}

// Instanciation
const user1 = new Utilisateur("Alice", 25);
const user2 = new Utilisateur("Bob", 30);

user1.sePresenter();
user2.sePresenter();

🔹 constructor() est la méthode spéciale appelée lors de la création d’un objet.

5. L’héritage

L’héritage permet de créer une classe dérivée à partir d’une autre classe.

class Utilisateur {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }

  sePresenter() {
    console.log(`Bonjour, je suis ${this.nom}, j'ai ${this.age} ans.`);
  }
}

class Admin extends Utilisateur {
  constructor(nom, age, role) {
    super(nom, age); // Appelle le constructeur de la classe parent
    this.role = role;
  }

  afficherRole() {
    console.log(`${this.nom} est un ${this.role}.`);
  }
}

// Instanciation
const admin1 = new Admin("Charlie", 35, "Administrateur");

admin1.sePresenter();
admin1.afficherRole();

🔹 super(nom, age) appelle le constructeur de la classe parent.

6. L’encapsulation (privatisation des propriétés)

Depuis ES2020, on peut rendre des propriétés privées en les préfixant avec #.

class Utilisateur {
  #motDePasse; // Propriété privée

  constructor(nom, age, motDePasse) {
    this.nom = nom;
    this.age = age;
    this.#motDePasse = motDePasse;
  }

  verifierMotDePasse(mdp) {
    return this.#motDePasse === mdp;
  }
}

const user = new Utilisateur("Alice", 25, "secret123");

console.log(user.nom); // ✅ Alice
console.log(user.#motDePasse); // ❌ Erreur : propriété privée
console.log(user.verifierMotDePasse("secret123")); // ✅ true

🔹 #motDePasse est inaccessible en dehors de la classe.

7. Le polymorphisme

Le polymorphisme permet à une méthode d’être redéfinie dans une classe enfant.

class Utilisateur {
  sePresenter() {
    console.log("Je suis un utilisateur.");
  }
}

class Admin extends Utilisateur {
  sePresenter() {
    console.log("Je suis un administrateur.");
  }
}

const user = new Utilisateur();
const admin = new Admin();

user.sePresenter();  // "Je suis un utilisateur."
admin.sePresenter(); // "Je suis un administrateur."

🔹 La méthode sePresenter() est redéfinie dans Admin.

🎯 Récapitulatif des concepts POO en JavaScript

Concept	Explication
Objet	Contient des propriétés et des méthodes
Classe	Modèle pour créer des objets
Constructeur	Initialise un objet à sa création
Héritage	Une classe enfant hérite d’une classe parent
Encapsulation	Restreint l’accès aux données avec des propriétés privées
Polymorphisme	Une méthode peut être redéfinie dans une classe dérivée

🚀 Grâce à ces concepts, vous pouvez structurer votre code de manière plus robuste et réutilisable en JavaScript !