Objekte zusammenbauen

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy — Lektion 49 von 56.

Nachdem wir nun die Probleme mit tiefer Vererbung und der „has-a“-Beziehung verstanden haben, lernen wir, wie man Objekte durch das Kombinieren kleiner, wiederverwendbarer Komponenten erstellt. Dieser Ansatz bietet uns maximale Flexibilität!

Das Grundmuster:

// Schritt 1: Erstellen Sie kleine, fokussierte Komponenten
class Engine {
  constructor(power) {
    this.power = power;
  }
  
  start() {
    console.log(`Engine (${this.power}HP) starting...`);
  }
}

class Wheels {
  constructor(count) {
    this.count = count;
  }
  
  rotate() {
    console.log(`${this.count} wheels rotating`);
  }
}

// Schritt 2: Objekte durch Kombinieren von Komponenten bauen
class Car {
  constructor(brand, enginePower, wheelCount) {
    this.brand = brand;
    this.engine = new Engine(enginePower);    // HAT EINE Engine
    this.wheels = new Wheels(wheelCount);     // HAT Räder
  }
  
  drive() {
    console.log(`${this.brand} is driving:`);
    this.engine.start();
    this.wheels.rotate();
  }
}

// Schritt 3: Das zusammengesetzte Objekt verwenden
const myCar = new Car('Toyota', 150, 4);
myCar.drive();
// Ausgabe:
// Toyota fährt:
// Motor (150 PS) startet...
// 4 Räder drehen sich

Die wahre Stärke: Komponenten kombinieren:

// Speziellere Komponenten
class TurboCharger {
  boost() {
    console.log('Turbo engaged! Extra power!');
  }
}

class SoundSystem {
  constructor(type) {
    this.type = type;
  }
  
  playMusic() {
    console.log(`Playing music on ${this.type} sound system`);
  }
}

// Verschiedene Autos mit unterschiedlichen Kombinationen bauen
class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.wheels = new Wheels(4);
    this.turbo = new TurboCharger();      // Sportwagen erhält Turbo
    this.soundSystem = new SoundSystem('Premium'); // Und guten Sound
  }
  
  raceMode() {
    console.log(`${this.brand} in race mode:`);
    this.engine.start();
    this.turbo.boost();
    this.wheels.rotate();
    console.log('VROOOOM!');
  }
  
  cruise() {
    console.log(`${this.brand} cruising:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

class EconomyCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(100);
    this.wheels = new Wheels(4);
    // Kein Turbo für Economy-Auto
    this.soundSystem = new SoundSystem('Basic'); // Nur Basis-Sound
  }
  
  drive() {
    console.log(`${this.brand} driving efficiently:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

// Sieh dir an, wie flexibel das ist!
const ferrari = new SportsCar('Ferrari');
const honda = new EconomyCar('Honda');

ferrari.raceMode();  // Hat Turbo-Boost!
ferrari.cruise();    // Hat Premium-Sound!

honda.drive();       // Nur Basisfunktionen

Dieser Ansatz bietet Ihnen die Flexibilität, Verhaltensweisen zu kombinieren, ohne komplexe Vererbungsketten zu benötigen!

Aufgabe

Vervollständigen Sie die SmartBulb-Methoden in der Datei SmartBulb.js.

Implementieren Sie die activate()-Methode, um das Licht einzuschalten.
Implementieren Sie die adjustBrightness()-Methode, um die Helligkeit einzustellen und genau Folgendes zu protokollieren: Brightness set to ${this.brightness.level}%

Spickzettel

Objekte können durch die Kombination kleiner, wiederverwendbarer Komponenten erstellt werden, anstatt tiefe Vererbung zu nutzen. Dies wird als Komposition bezeichnet und folgt der „hat-ein“-Beziehung.

Grundlegendes Kompositionsmuster:

// Schritt 1: Erstellen Sie kleine, fokussierte Komponenten
class Engine {
  constructor(power) {
    this.power = power;
  }
  
  start() {
    console.log(`Engine (${this.power}HP) starting...`);
  }
}

// Schritt 2: Objekte durch Kombinieren von Komponenten bauen
class Car {
  constructor(brand, enginePower) {
    this.brand = brand;
    this.engine = new Engine(enginePower);  // HAT-EINEN Motor
  }
  
  drive() {
    this.engine.start();
  }
}

Komponenten für Flexibilität mischen und anpassen:

class TurboCharger {
  boost() {
    console.log('Turbo engaged!');
  }
}

class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.turbo = new TurboCharger();  // Turbo-Komponente hinzufügen
  }
  
  raceMode() {
    this.engine.start();
    this.turbo.boost();
  }
}

class EconomyCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(100);
    // Keine Turbo-Komponente
  }
}

Komposition ermöglicht es Ihnen, Objekte mit verschiedenen Kombinationen von Funktionen zu erstellen, ohne komplexe Vererbungsketten zu verwenden.

Probier es selbst

import { SmartBulb } from './SmartBulb.js';

const bedroomLight = new SmartBulb('warm white');

console.log('1. Activating light:');
bedroomLight.activate();

console.log('\n2. Adjusting brightness:');
bedroomLight.adjustBrightness(75);