Detaillierte Erklärung des Vererbungswissens in js

In diesem Artikel teilen wir Ihnen hauptsächlich die detaillierte Erklärung des Vererbungswissens in js mit, hauptsächlich in Form von Text und Code, in der Hoffnung, allen zu helfen.

1. Verstehen Sie die Beziehung zwischen Konstrukten, Instanzen und Prototypen. Die Prototypen von Konstrukten und Instanzen verweisen auf Prototypen, und der Konstrukteur von Prototypen verweist auf Konstruktoren

2. Unterklassen müssen die Methoden und Attribute der übergeordneten Klasse wiederverwenden

3. Zeigen Sie den von der Unterklasse erstellten Prototyp auf eine Instanz der übergeordneten Klasse, und die Unterklasse kann darauf zugreifen Attribute und Methoden der übergeordneten Klasse durch diese Instanz

4. Das Fortschreiten dieser Beziehung Schicht für Schicht bildet eine Prototypenkette

• Implementierung

function Super(name) {
    this.name = "name";
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}
Super.prototype.getSuperproperty = function () {
    return this.superproperty;
}

function Sub(name) {
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc

Die letzten beiden Ausgaben sind der Prozess von ctc. Wenn die Instanz auf den „.“-Operator trifft, wird sie ausgeführt: 1) Suche nach Instanz, 2) Suche nach Sub .prototype, 3) Suche nach super.prototype.

• Achtung

Standard-Prototypobjekt
Jede Instanz verfügt über ein Standard-Prototypobjekt, daher ist der super.prototype gerade der Prototyp verweist auf den Prototyp des Objekts

Müssen Sie beim Definieren von

//继承
Sub.prototype = new Super();

vorsichtig sein und es beim Erben überschreiben? Auf wen verweist der Konstrukteur von sub.prototype derzeit?

Dieser Satz muss platziert werden,

bevor neue Methoden hinzugefügt und der Methodencode überschrieben werden

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

• Nachteile

Die Instanzattribute der übergeordneten Klasse werden zu Prototypattributen der Unterklasse und werden gemeinsam genutzt.

Konstruktor ausleihen

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

}//Inherit Sub.prototype = new Super();Sub.prototype.getSubName = function () { diesen Namen zurückgeben ;}

this.name = name;

Übernimmt hauptsächlich den Code der Super-Struktur, um die Definition der eigenen Attribute von sub zu implementieren.

Aber auf diese Weise kann jede Instanz ihre eigenen Attribute und Methoden haben , und gleichzeitig geht die Wiederverwendbarkeit von Methodenfunktionen verloren

Kombinierte Vererbung

wird verwendet, um das Problem der Methodenwiederverwendung zu lösen

Wird im Konstruktor des übergeordneten Elements verwendet Durch die dynamische Prototypenkonstruktion oder kombinierte Konstruktion kann der Konstruktor nur Attributzuweisungsdefinitionen und Methodendefinitionen für den Prototyp haben.

Zeigen Sie dann in der Unterklasse den Prototyp der Unterklasse auf eine Instanz der übergeordneten Klasse Eine Klasse übernimmt die Struktur der übergeordneten Klasse, sodass jede Instanz der Unterklasse über eigene Attribute verfügt, die Methoden jedoch gemeinsam genutzt werden.

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

Sub.prototype.getSubName = function () { return this.name;}var example = new Sub("ctc");

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Prototypische Vererbung

Eine weitere Implementierung der Vererbung, nur mit Hilfe von Prototypen können neue Objekte basierend auf vorhandenen Objekten erstellt werden

Verständnis: F ist eine Funktion und ein Objekt, und sein Prototyp zeigt auf das Objekt () akzeptiert o, das zurückgegebene F ist ein Objekt, dessen Prototyp auf o zeigt.

function object(o) {
    function F() {
    }
    F.prototype = o;
    return F;
}

Angenommen: Object.creat() standardisiert die obige Funktion, das heißt, Object.creat(o) implementiert auch den obigen Code

Parasitäre Vererbung

In der prototypischen Vererbung Ein Auf dieser Grundlage wurde das Objekt gestärkt

Attributmethoden zum Objekt hinzugefügt

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

Parasitäre kombinierte Vererbung

Der Zweck besteht darin, das Problem zu lösen der kombinierten Vererbung Das Problem besteht darin, dass Super() bei der kombinierten Vererbung mindestens zweimal aufgerufen wird, 1. Super.call(this,arguments) 2. Sub.prototype = new Super()

Tatsächlich haben wir gerade Ich möchte, dass der Prototyp der Unterklasse die Methoden der übergeordneten Klasse erbt (normalerweise auf dem Prototyp der übergeordneten Klasse, da nicht jede Instanz ihren eigenen Methodenraum hat)

Wir können also die prototypische Vererbung verwenden, um nur den Prototyp zu erben der Unterklasse aus der übergeordneten Klasse Der Prototyp von

ersetzt das kombinierte geerbte

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

durch

Sub.prototype = new Super();

Verwandte Empfehlungen:

inherit(Sub,Super);

in JS Ausführliche Erläuterung von Beispielen für Vererbungsmethoden

Welche Vererbungsmethoden gibt es in JS?

Detaillierte Interpretation des Vererbungsmechanismus in js

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Vererbungswissens in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!