La programmation orientée objet (POO) est fondamentale pour créer un code bien structuré, modulaire et réutilisable. Alors que JavaScript était initialement procédural, ES6 et au-delà ont introduit la syntaxe pour la POO, ce qui en fait un langage idéal pour maîtriser les paradigmes fonctionnels et orientés objet. Cet article couvre les concepts fondamentaux de la POO en JavaScript, notamment les classes, l'héritage, le polymorphisme et l'abstraction, ainsi que les fonctionnalités spécifiques à JavaScript telles que l'héritage des prototypes et la composition des objets.
1.Encapsulation :
L'encapsulation permet de regrouper des données et des méthodes au sein d'objets, limitant ainsi l'accès direct à l'état d'un objet. Cela protège les données contre les modifications involontaires et permet une interaction contrôlée.
class Car { constructor(make, model) { this.make = make; this.model = model; this._engineOn = false; } startEngine() { this._engineOn = true; console.log(`${this.make} ${this.model} engine started.`); } stopEngine() { this._engineOn = false; console.log(`${this.make} ${this.model} engine stopped.`); } } const myCar = new Car("Toyota", "Corolla"); myCar.startEngine(); // Output: Toyota Corolla engine started.
2.Héritage :
L'héritage permet de créer des classes enfants basées sur une classe parent, permettant la réutilisation du code et la définition de hiérarchies.
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a sound.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } const myDog = new Dog("Max"); myDog.speak(); // Output: Max barks.
3.Polymorphisme :
Le polymorphisme permet à différentes classes de répondre au même appel de fonction ou de méthode. JavaScript réalise le polymorphisme via le remplacement de méthode.
class Printer { print() { console.log("Printing document..."); } } class PDFPrinter extends Printer { print() { console.log("Printing PDF document..."); } } const printer = new Printer(); const pdfPrinter = new PDFPrinter(); printer.print(); // Printing document... pdfPrinter.print(); // Printing PDF document...
4.Abstraction :
L'abstraction simplifie les systèmes complexes en exposant uniquement les parties nécessaires. ES2020 a introduit des champs privés avec #, permettant l'encapsulation dans les classes.
class Account { #balance; constructor(initialBalance) { this.#balance = initialBalance; } deposit(amount) { this.#balance += amount; } getBalance() { return this.#balance; } } const myAccount = new Account(1000); myAccount.deposit(500); console.log(myAccount.getBalance()); // Output: 1500
JavaScript est basé sur un prototype, ce qui signifie que les objets peuvent directement hériter d'autres objets plutôt que de classes. Ceci est réalisé grâce à des prototypes, qui sont des objets dont d'autres objets héritent de méthodes et de propriétés.
function Vehicle(type) { this.type = type; } Vehicle.prototype.start = function() { console.log(`${this.type} is starting.`); }; const car = new Vehicle("Car"); car.start(); // Car is starting.
La composition est une alternative à l'héritage où, au lieu de créer des classes dans une hiérarchie, vous créez des objets contenant des objets plus petits et réutilisables pour obtenir la fonctionnalité souhaitée.
const canFly = { fly() { console.log("Flying!"); } }; const canSwim = { swim() { console.log("Swimming!"); } }; function Fish(name) { this.name = name; } Object.assign(Fish.prototype, canSwim); const fish = new Fish("Nemo"); fish.swim(); // Swimming!
1. Modèle d'usine :
Le Factory Pattern est un modèle de conception dans lequel vous créez des objets sans spécifier la classe exacte. C’est utile pour encapsuler la logique de création d’objets.
function createUser(name, role) { return { name, role, describe() { console.log(`${this.name} is a ${this.role}`); } }; } const admin = createUser("Alice", "Administrator"); admin.describe(); // Alice is an Administrator
2. Modèle Singleton :
Singleton est un modèle de conception dans lequel une classe n'a qu'une seule instance. C'est utile pour créer des objets accessibles globalement comme des configurations ou des états d'application.
const Singleton = (function () { let instance; function createInstance() { return new Object("I am the instance"); } return { getInstance: function () { if (!instance) { instance = createInstance(); } return instance; } }; })(); const instance1 = Singleton.getInstance(); const instance2 = Singleton.getInstance(); console.log(instance1 === instance2); // true
3. Modèle d'observateur :
Le modèle d'observateur définit une relation de dépendance dans laquelle les modifications apportées à un objet (sujet) entraînent des notifications pour d'autres objets (observateurs).
class Car { constructor(make, model) { this.make = make; this.model = model; this._engineOn = false; } startEngine() { this._engineOn = true; console.log(`${this.make} ${this.model} engine started.`); } stopEngine() { this._engineOn = false; console.log(`${this.make} ${this.model} engine stopped.`); } } const myCar = new Car("Toyota", "Corolla"); myCar.startEngine(); // Output: Toyota Corolla engine started.
1. Éviter la surutilisation de l'héritage : Privilégier la composition pour une meilleure flexibilité et réutilisation.
2. Minimiser les effets secondaires : Conservez les données encapsulées pour éviter toute modification involontaire.
3. Utilisation d'Object.freeze : Cela évite les modifications accidentelles dans les objets immuables.
L'approche JavaScript de la POO fournit un modèle flexible et hybride combinant l'héritage basé sur des prototypes et la POO classique. Avec les avancées d'ES6 telles que les classes et les champs privés, JavaScript permet aux développeurs de créer des applications complexes tout en conservant une structure de code propre. En maîtrisant la POO en JavaScript, vous pouvez créer un code évolutif, maintenable et performant pour les applications du monde réel.
Mon site personnel : https://shafayet.zya.me
Un mème pour toi ???
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!