Maison >interface Web >js tutoriel >Programmation orientée objet (POO) en JavaScript : un guide complet

Programmation orientée objet (POO) en JavaScript : un guide complet

Barbara Streisand
Barbara Streisandoriginal
2024-12-30 14:30:14903parcourir

Object-Oriented Programming (OOP) in JavaScript: A Comprehensive Guide

Programmation Orientée Objet (POO) en JavaScript


1. Objets et classes

En JavaScript, les objets sont des collections de paires clé-valeur (propriétés et méthodes). Les classes servent de modèles pour créer des objets.

Exemple:

// Define a class
class Person {
  constructor(name, age) {
    this.name = name; // Property
    this.age = age;
  }

  greet() { // Method
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Create an object
const person1 = new Person('Alice', 25);
person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.

2. Encapsulation

L'encapsulation signifie regrouper des données (propriétés) et des méthodes qui manipulent les données au sein d'une seule unité (objet). Il restreint l'accès direct à certaines parties d'un objet.

Exemple:

class BankAccount {
  #balance; // Private field

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Error: Private field '#balance' not accessible

3. Héritage

L'héritage permet à une classe d'hériter des propriétés et des méthodes d'une autre classe. Cela permet de réutiliser le code existant.

Exemple:

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // Output: Buddy barks.

4. Polymorphisme

Le polymorphisme signifie avoir plusieurs formes. En POO, cela permet aux méthodes des classes enfants d'avoir le même nom que les méthodes de la classe parent mais de se comporter différemment.

Exemple:

class Shape {
  area() {
    return 0;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
}

const shape = new Shape();
const rectangle = new Rectangle(10, 5);

console.log(shape.area());       // 0
console.log(rectangle.area());   // 50

5. Abstraction

L'abstraction cache la complexité du code et ne montre que les parties essentielles à l'utilisateur.

Exemple:

class Vehicle {
  startEngine() {
    console.log('Engine started');
  }
}

class Car extends Vehicle {
  drive() {
    console.log('Driving the car...');
  }
}

const car = new Car();
car.startEngine(); // Engine started
car.drive();       // Driving the car...

6. Méthodes et propriétés statiques

Les méthodes et propriétés statiques appartiennent à la classe elle-même, pas aux instances.

Exemple:

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // 8

7. Prototypes

JavaScript utilise un modèle d'héritage basé sur un prototype, dans lequel les objets peuvent hériter des propriétés et des méthodes d'autres objets.

Exemple:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('Alice');
person.greet(); // Hello, my name is Alice

Points clés à retenir

  1. Utilisez des classes pour créer des plans d'objets.
  2. Encapsulez les propriétés avec des champs privés en utilisant #.
  3. Utilisez l'héritage (étend) pour réutiliser le code.
  4. Remplacer les méthodes pour le polymorphisme.
  5. Simplifiez les interactions avec l'abstraction.
  6. Exploitez les méthodes statiques et l'héritage des prototypes.

Les fonctionnalités POO de JavaScript permettent aux développeurs d'écrire du code propre, modulaire et réutilisable.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!

Déclaration:
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