Erweitern Sie mehrere Klassen in JavaScript

1. Kompositionsansatz zum Erweitern mehrerer Klassen in JavaScript
2. Verhaltensdelegationsansatz zum Erweitern mehrerer Klassen in JavaScript

JavaScript hat keinen eingebauten Mechanismus zum Erweitern mehrerer Klassen. Um jedoch einen ähnlichen Effekt der Mehrfachvererbung in JavaScript zu erzielen, verwenden Sie Techniken, die als Komposition und Verhaltensdelegation bezeichnet werden.

Kompositionsansatz zum Erweitern mehrerer Klassen in JavaScript

Anstatt Eigenschaften und Methoden von mehreren Klassen zu erben, können Sie bei der Zusammensetzung eine Instanz jeder Klasse erstellen, diese als neue Klasseneigenschaft speichern und dann die Methodenaufrufe an die entsprechenden Instanzen delegieren.

Es ist wichtig zu beachten, dass Sie mit diesem Ansatz mehr Kontrolle über das Verhalten der Klasse haben; Sie können auf die Eigenschaften und Methoden der zusammengesetzten Klasse zugreifen und Methoden bei Bedarf überschreiben.

Implementierung zur Erweiterung mehrerer Klassen

Im folgenden Beispiel hat Klasse C eine Instanz von Klasse A und Klasse B als Eigenschaften und delegiert die Methodenaufrufe an die entsprechenden Instanzen. Auf diese Weise kann Klasse C auf die Methoden von Klasse A und Klasse B zugreifen.

Klasse A hat eine einzelne Methode namens methodA, die bei Aufruf eine Nachricht Class A: methodA called an die Konsole ausgibt. Klasse B hat eine einzelne Methode namens methodB, die bei Aufruf eine Nachricht Class B: methodB called an die Konsole ausgibt.

class A {
  methodA() {
    console.log('Class A: methodA called');
  }
}

class B {
  methodB() {
    console.log('Class B: methodB called');
  }
}

Klasse C verwendet das Kompositionsmuster, um einen ähnlichen Effekt von Mehrfachvererbungen zu erzielen. Der Konstruktor erstellt Instanzen von Klasse A und Klasse B und speichert sie als Eigenschaften a bzw. b.

constructor() {
  this.a = new A();
  this.b = new B();
}

Klasse C hat zwei Methoden, methodA und methodB, die vor und nach dem Aufruf der entsprechenden Methoden der Klassen A und B zusätzliche Operationen ausführen.

methodA() {
  console.log('Class C: Additional operation before calling methodA');
  this.a.methodA();
  console.log('Class C: Additional operation after calling methodA');
}

methodB() {
  console.log('Class C: Additional operation before calling methodB');
  this.b.methodB();
  console.log('Class C: Additional operation after calling methodB');
}

Wenn die letzten beiden Zeilen ausgeführt werden, erstellen sie eine Instanz der Klasse C und rufen dann deren methodA() und methodB(). auf.

const c = new C();
c.methodA();
c.methodB();

Quellcode:

class A {
  methodA() {
    console.log('Class A: methodA called');
  }
}

class B {
  methodB() {
    console.log('Class B: methodB called');
  }
}

class C {
  constructor() {
    this.a = new A();
    this.b = new B();
  }

  methodA() {
    console.log("Class C: Additional operation before calling methodA");
    this.a.methodA();
    console.log("Class C: Additional operation after calling methodA");
  }

  methodB() {
    console.log("Class C: Additional operation before calling methodB");
    this.b.methodB();
    console.log("Class C: Additional operation after calling methodB");
  }
}

const c = new C();
c.methodA();
c.methodB();

Ausgang:

Verhaltensdelegationsansatz zum Erweitern mehrerer Klassen in JavaScript

Eine andere Variante dieses Ansatzes ist die Verwendung von Verhaltensdelegierung, bei der Sie die Methodenaufrufe direkt an eine Eigenschaft der zusammengesetzten Klasse delegieren, anstatt Instanzen der zusammengesetzten Klasse zu speichern.

Implementierung zur Erweiterung mehrerer Klassen

Beim Aufruf der methodA der Klasse C gibt diese zuerst eine Meldung Class C: Additional operation before calling methodA an die Konsole aus, dann ruft sie die methodA der Klasse A mit A.prototype.methodA.call(this);, dies gibt Class A: methodA called an die Konsole aus.

Abschließend gibt es eine Meldung Klasse C: Zusätzliche Operation nach Aufruf von MethodeA an die Konsole aus.

Ebenso gibt es beim Aufruf von methodB der Klasse C zuerst eine Meldung Class C: Additional operation before calling methodB an die Konsole aus, dann ruft es das methodB der Klasse B mit B.prototype.methodB.call(this);, dies gibt Klasse B: methodB aufgerufen an die Konsole aus.

Abschließend gibt es eine Meldung Klasse C: Zusätzliche Operation nach Aufruf von MethodeB an die Konsole aus.

Auf diese Weise kann Klasse C auf die Methoden von Klasse A und Klasse B zugreifen und einige zusätzliche Operationen zu den Methoden hinzufügen, ohne die ursprünglichen Klassen zu ändern.

Es ist wichtig zu beachten, dass Klasse C in diesem Fall keine Instanzen von A und B hat. Stattdessen verwendet sie die Methode call, um die Methoden von A und B im Kontext von Klasse C aufzurufen.

Quellcode:

class A {
  methodA() {
    console.log('Class A: methodA called');
  }
}

class B {
  methodB() {
    console.log('Class B: methodB called');
  }
}

class C {
  methodA() {
    console.log("Class C: Additional operation before calling methodA");
    A.prototype.methodA.call(this);
    console.log("Class C: Additional operation after calling methodA");
  }

  methodB() {
    console.log("Class C: Additional operation before calling methodB");
    B.prototype.methodB.call(this);
    console.log("Class C: Additional operation after calling methodB");
  }
}

const c = new C();
c.methodA();
c.methodB();

Ausgang:

Dieser Ansatz ist speichereffizienter als die Komposition, aber weniger flexibel, da er nicht auf die Eigenschaften der zusammengesetzten Klasse zugreifen kann.

Wie Sie sehen können, kann Klasse C in beiden Fällen einige zusätzliche Operationen zu den Methoden von Klasse A und Klasse B hinzufügen, ohne die ursprünglichen Klassen zu ändern. Auf diese Weise können Sie die ursprünglichen Klassen sauber und getrennt halten und der neuen Klasse C bestimmte Funktionen hinzufügen.