Erkundung der objektorientierten Programmierung (OOP) in JavaScript

Erkunden der objektorientierten Programmierung (OOP) in JavaScript

Datum: 17. Dezember 2024

Objektorientierte Programmierung (OOP) ist ein Paradigma, das Objekte verwendet, um reale Entitäten zu modellieren. Als vielseitige Programmiersprache bietet JavaScript durch seine Prototypen, ES6-Klassen und modernen Erweiterungen solide Unterstützung für OOP. Heute werden wir uns eingehend mit den Prinzipien und Funktionen von OOP in JavaScript befassen.

---

Kernkonzepte von OOP in JavaScript

1. Objekte

Objekte sind die Bausteine ​​von OOP. In JavaScript ist ein Objekt eine Sammlung von Schlüssel-Wert-Paaren.

Beispiel: Objekte erstellen

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

2. Klassen

Klassen sind Blaupausen zum Erstellen von Objekten. Sie kapseln Daten und Verhalten. JavaScript hat das Schlüsselwort class in ES6 eingeführt.

Beispiel: Erstellen einer Klasse

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

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

3. Kapselung

Kapselung bedeutet, Daten und Methoden zu bündeln und gleichzeitig den direkten Zugriff auf einige Komponenten einzuschränken. JavaScript erreicht dies mithilfe öffentlicher, privater und geschützter Mitglieder.

Private Felder

Private Felder werden durch ein #-Präfix gekennzeichnet und sind nur innerhalb der Klasse zugänglich.

Beispiel: Private Felder

class BankAccount {
  #balance;

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

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

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

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

---

4. Vererbung

Vererbung ermöglicht es einer Klasse, mithilfe des Schlüsselworts „extends“ Eigenschaften und Methoden von einer anderen Klasse zu erben.

Beispiel: Vererbung

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

---

5. Polymorphismus

Polymorphismus ermöglicht es einer Unterklasse, eine Methode ihrer übergeordneten Klasse zu überschreiben, um eine bestimmte Implementierung bereitzustellen.

Beispiel: Methodenüberschreibung

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

6. Abstraktion

Abstraktion konzentriert sich darauf, nur wesentliche Details offenzulegen und gleichzeitig die Komplexität der Implementierung zu verbergen. Während JavaScript von Haus aus keine abstrakten Klassen hat, können Sie diese simulieren.

Beispiel: Abstraktion simulieren

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

---

7. Prototypen und Prototypenkette

JavaScript ist eine prototypbasierte Sprache. Jedes Objekt verfügt über eine interne Verbindung zu einem anderen Objekt, das als Prototyp bezeichnet wird.

Beispiel: Prototypenkette

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

8. Objektzusammensetzung vs. Vererbung

Anstatt die Vererbung zu nutzen, können Sie Objekte durch die Kombination von Funktionalitäten zusammenstellen. Dieser Ansatz vermeidet die Komplexität tiefer Vererbungshierarchien.

Beispiel: Komposition

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

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

Grundprinzipien von OOP

1. DRY (Don't Repeat Yourself): Code durch Klassen und Vererbung wiederverwenden.
2. SOLID-Prinzipien: Befolgen Sie Best Practices zum Schreiben von skalierbarem und wartbarem OOP-Code.

---

Beispiel aus der Praxis: Benutzerverwaltungssystem

Schritt 1: Definieren Sie eine Basisklasse

class BankAccount {
  #balance;

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

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

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

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

Schritt 2: Funktionalität erweitern

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

Schritt 3: Instanzen erstellen

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

Übungsaufgaben

1. Erstellen Sie eine Klassenhierarchie für ein Bibliotheksverwaltungssystem.
2. Implementieren Sie eine BankAccount-Klasse mit privaten Feldern für den Kontostand und öffentlichen Methoden für Ein- und Auszahlungen.
3. Schreiben Sie eine Fahrzeugklasse mit Unterklassen wie „Auto“ und „Fahrrad“, die Polymorphismus demonstrieren.

---

Fazit

OOP in JavaScript bietet eine leistungsstarke Möglichkeit, sauberen, modularen und wiederverwendbaren Code zu schreiben. Durch die Beherrschung von Konzepten wie Klassen, Vererbung, Kapselung und Polymorphismus sind Sie für die Erstellung skalierbarer Anwendungen bestens gerüstet. Experimentieren Sie weiter und wenden Sie diese Konzepte auf reale Probleme an, um Ihr Verständnis zu festigen!

Thema von morgen: Wir werden Asynchrone Programmierung in JavaScript untersuchen und uns eingehend mit Callbacks, Versprechen und Async/Await befassen. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonErkundung der objektorientierten Programmierung (OOP) in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!