Maison > interface Web > js tutoriel > Dominez la programmation orientée objet (POO) en JavaScript.

Dominez la programmation orientée objet (POO) en JavaScript.

Mary-Kate Olsen
Libérer: 2024-11-09 06:38:02
original
755 Les gens l'ont consulté

Introduction

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.

Concepts clés de la POO en JavaScript

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.
Copier après la connexion
Copier après la connexion

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.
Copier après la connexion

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...
Copier après la connexion

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
Copier après la connexion

Héritage basé sur des prototypes en JavaScript

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.
Copier après la connexion

Composition sur héritage

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!
Copier après la connexion

Modèles de POO avancés en JavaScript

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
Copier après la connexion

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
Copier après la connexion

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.
Copier après la connexion
Copier après la connexion

Défis et meilleures pratiques

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.

À la fin

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 ???

Dominate Object-Oriented Programming (OOP) in JavaScript.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal