JavaScript-Komposition und Vererbung erklärt

1. Einleitung

Bevor Sie die Vererbung lernen, müssen Sie ein gewisses Verständnis der Prototypenkette haben.

Wenn Sie es nicht verstehen, können Sie zunächst einen anderen Artikel von mir lesen, der eine ausführlichere Erklärung der Prototypenkette enthält: Detaillierte Erklärung der JavaScript-Prototypenkette.

Wenn Sie es bereits verstanden haben, fahren Sie bitte fort.

Ich habe zuvor einen Blogbeitrag geschrieben, in dem alle Vererbungsmethoden aufgelistet sind. Allerdings fand ich, dass er zu lang war, um ihn auf einmal durchzulesen, und dass er der Wissensaufnahme nicht förderlich ist. Deshalb werde ich zunächst den zusammengesetzten Vererbungsteil heraustrennen und den parasitären Teil später zusammenstellen.

2. Vererbung der Prototypkette

Die Instanz der übergeordneten Klasse wird als Prototyp der untergeordneten Klasse verwendet. Der implizite Prototyp __proto__ der beiden von der untergeordneten Klasse erstellten Instanzen zeigt auf die Instanz der übergeordneten Klasse, und der implizite Prototyp __proto__ der Instanz der übergeordneten Klasse zeigt auf den Prototyp der übergeordneten Klasse father.prototype
Gemäß den Eigenschaften der Prototypenkette können alle Unterklasseninstanzen die Eigenschaften des Prototyps der übergeordneten Klasse erben.

Lesen Sie das folgende Bild, um den Code besser zu verstehen:

 //Vater Klassenfunktion Vater() {
      dies.fatherAttr = ["fatherAttr"];
    }
    
    //Eigenschaften des Prototyps der übergeordneten Klasse father.prototype.checkProto = "checkProto";

    //Unterklassenfunktion child() {}

    //Verwende die Vaterinstanz als Prototyp des Kindkonstruktors child.prototype = new father();
    Kind.Prototyp.Konstruktor = Kind;

    //Zwei Unterklasseninstanzen const test1 = new child();
    const test2 = neues Kind();

    console.log("Test 1:");
    konsole.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("Test 2:");
    test1.fatherAttr.push("neuesAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("Test 3:");
    Konsole.log("test1.checkProto:", test1.checkProto);

Merkmale:

• Keines der beiden Instanzobjekte besitzt ein fatherAttr Attribut, aber da die Instanz der übergeordneten Klasse das fatherAttr Attribut besitzt und die Instanz der übergeordneten Klasse nun als Prototyp des untergeordneten Objekts dient, können sie gemäß der Prototypenkette die Attribute auf dem Prototyp ihres eigenen child Konstruktors gemeinsam nutzen. (Test 1)
• Da es nur eine Instanz der übergeordneten Klasse als Prototyp gibt, teilen sich alle Instanzen die Eigenschaft fatherAttr des Prototyps. Wenn die Eigenschaft des Prototyps ein Referenztyp ist, hier also ein Array, führt das Hinzufügen eines neuen Inhalts zu test1 dazu, dass sich auch fatherAttr von test2 ändert. (Test 2) (Nachteile)
• child Konstruktor kann keine Eingabeparameter übergeben. (Mangel)
• Instanzen können auf die Eigenschaften des Prototyps der übergeordneten Klasse zugreifen, sodass im Prototyp der übergeordneten Klasse wiederverwendbare Methoden definiert werden können. (Test 3)

3. Konstruktorvererbung

Binden Sie this von der übergeordneten Klasse an die untergeordnete Klasse, d. h. wenn die untergeordnete Klasse eine Instanz erstellt, wird der Konstruktor der übergeordneten Klasse innerhalb der untergeordneten Klasse aufgerufen und die Eigenschaften der übergeordneten Klasse werden in die Instanz der untergeordneten Klasse kopiert, sodass die Instanz diese Eigenschaften erbt.

    //Vater Klassenfunktion Vater(Params) {
      dies.fatherAttr = ["fatherAttr"];
      dies.params = Parameter;
    }

    //Eigenschaften des Prototyps der übergeordneten Klasse father.prototype.checkProto = "checkProto";

    //Unterklassenfunktion child(params) {
      Vater.call(dies, Parameter);
    }

    //Zwei Unterklasseninstanzen const test1 = new child("params1");
    const test2 = neues Kind("params2");

    console.log("Test 1:");
    konsole.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("Test 2:");
    test1.fatherAttr.push("neuesAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);
    
    console.log("Test 3:");
    Konsole.log("test1.checkProto:", test1.checkProto);

Merkmale:

• Beide Instanzobjekte haben das kopierte Attribut fatherAttr , es gibt also kein gemeinsames Attribut. Um eine Instanz zu erstellen, müssen alle Attribute der Elternklasse einmal kopiert werden. Und da der Prototyp der Elternklasse nicht vererbt werden kann, können die Methoden nicht wiederverwendet werden und sind gezwungen, die Methoden zu kopieren. (Test 1) (Nachteile)
• Das Hinzufügen eines neuen Inhalts test1 ändert nur die Eigenschaften von test1 selbst und hat keine Auswirkungen test2 . (Test 2)
• child Konstruktor kann Parameter übergeben, um seine eigenen Eigenschaften anzupassen. (Test 1)
• Instanzen können keine Eigenschaften vom Prototyp ihrer übergeordneten Klasse erben. (Test 3) ( Nachteile )

4. Kombinationsvererbung

Durch die Kombination der Prototypkettenvererbung und der Konstruktorvererbung können Sie sie entsprechend den Eigenschaften der beiden Vererbungen verwenden.

  //Vater Klassenfunktion Vater(Params) {
      dies.fatherAttr = ["fatherAttr"];
      dies.params = Parameter;
    }

    //Eigenschaften des Prototyps der übergeordneten Klasse father.prototype.checkProto = "checkProto";

    //Unterklassenfunktion child(params) {
      //Der zweite Aufruf des Konstruktors der übergeordneten Klasse father.call(this, params);
    }

    // Verwende die Vaterinstanz als Prototyp des Kindkonstruktors child.prototype = new father(); //Der Konstruktor der Elternklasse wird zum ersten Mal aufgerufen child.prototype.constructor = child;

    //Zwei Instanzen const test1 = new child("params1"); //Von hier zum Konstruktor der Unterklasse springen und den Konstruktor der übergeordneten Klasse ein zweites Mal aufrufen const test2 = new child("params2");

    console.log("Test 1:");
    konsole.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("Test 2:");
    test1.fatherAttr.push("neuesAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("Test 3:");
    Konsole.log("test1.checkProto:", test1.checkProto);

    console.log("Test 4:");
    test1.fatherAttr löschen
    konsole.log("test1:", test1);
    console.log("test1.fatherAttr:", test1.fatherAttr);

Merkmale:

• Beide Instanzobjekte besitzen das kopierte Attribut fatherAttr . Um eine Instanz zu erzeugen, müssen alle Attribute der Elternklasse einmal kopiert werden (Vererbungseigenschaften des Konstruktors, Test 1), es kann aber auf den Prototyp der Elternklasse zugegriffen werden und die Wiederverwendungsmethode kann auf dem Prototyp der Elternklasse definiert werden. (Prototyp der Kettenvererbungsfunktionen, Test 1)
• Das Hinzufügen neuer Inhalte test1 ändert nur die Eigenschaften von Test1 selbst und hat keine Auswirkungen auf Test2. (Vererbungsfunktionen des Konstruktors, Test 2)
• child Konstruktor kann Parameter übergeben, um seine eigenen Eigenschaften anzupassen. (Vererbungsfunktionen des Konstruktors, Test 1)
• Instanzen können Eigenschaften vom Prototyp ihrer übergeordneten Klasse erben. (Prototyp der Kettenvererbungsfunktionen, Test 3)
• Der Konstruktor der übergeordneten Klasse wird zweimal aufgerufen, es werden zwei Instanzen generiert, die Prototypkette der Unterklasse wird einmal erstellt und wenn die Unterklasse zum Erstellen einer Instanz verwendet wird, wird sie einmal innerhalb der Unterklasse aufgerufen und das zweite Mal deckt das erste Mal ab. (Mangel)
• Da der Konstruktor der übergeordneten Klasse zweimal aufgerufen wird, verfügt die Instanz, wenn mit „delete“ das aus der Instanz kopierte Attribut fatherAttr gelöscht wird, immer noch über fatherAttr in der Instanz der übergeordneten Klasse, auf die der implizite Prototyp zeigt. (Vererbungsfunktionen der Prototypkette, Test 4) (Nachteile)

Dies ist das Ende dieses Artikels mit der ausführlichen Erklärung der JavaScript-Kombination und -Vererbung. Weitere relevante Inhalte zur JavaScript-Kombination und -Vererbung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!