Detaillierte Erläuterung der Vererbung in JavaScript_Javascript-Kenntnissen

Das Konzept der js-Vererbung

Die folgenden zwei Vererbungsmethoden werden häufig in js verwendet:

Prototyp-Kettenvererbung (Vererbung zwischen Objekten)
Klassenvererbung (Vererbung zwischen Konstruktoren)
Da js keine wirklich objektorientierte Sprache wie Java ist, basiert js auf Objekten und kennt kein Klassenkonzept. Wenn Sie also die Vererbung implementieren möchten, können Sie den Prototyp-Mechanismus von js oder die Apply- und Call-Methoden

verwenden

In objektorientierten Sprachen verwenden wir Klassen, um ein benutzerdefiniertes Objekt zu erstellen. Allerdings ist alles in js ein Objekt. Wie erstellt man also ein benutzerdefiniertes Objekt? Dies erfordert die Verwendung des js-Prototyps:

Wir können uns den Prototyp einfach als Vorlage vorstellen. Die neu erstellten benutzerdefinierten Objekte sind alle Kopien dieser Vorlage (Prototyp) (eigentlich keine Kopien, sondern Links, aber dieser Link ist unsichtbar. Neu) Es gibt einen unsichtbaren __Proto__-Zeiger innerhalb des instanziierten Objekt, das auf das Prototypobjekt zeigt).

JS kann die Funktionen von Klassen durch Konstruktoren und Prototypen simulieren. Darüber hinaus basiert die Implementierung der JS-Klassenvererbung auch auf der Prototypenkette.

Prototypische Vererbung und Klassenvererbung

Bei der klassischen Vererbung wird der Konstruktor des Supertyps innerhalb des Konstruktors des Subtyps aufgerufen.
Die strikte Klassenvererbung ist nicht sehr verbreitet und wird normalerweise in Kombination verwendet:

Code kopieren Der Code lautet wie folgt:

Funktion Super(){
This.colors=["red","blue"];
}

Funktion Sub(){
Super.call(this);
}

Bei der prototypischen Vererbung werden mithilfe vorhandener Objekte neue Objekte erstellt und der Prototyp der Unterklasse auf die übergeordnete Klasse verwiesen. Dies entspricht dem Beitritt zur Prototypenkette der übergeordneten Klasse

Prototyp-Kettenvererbung

Damit die Unterklasse die Attribute (einschließlich Methoden) der übergeordneten Klasse erbt, müssen Sie zunächst einen Konstruktor definieren. Weisen Sie dann die neue Instanz der übergeordneten Klasse dem Prototyp des Konstruktors zu. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion Parent(){<br> This.name = 'mike';<br> } <p>Funktion Child(){<br> This.age = 12;<br> }<br> Child.prototype = new Parent();//Child erbt Parent und bildet eine Kette durch den Prototyp</p> <p> var test = new Child();<br> alarm(test.age);<br> ​​ Alert(test.name);//Geerbte Attribute abrufen<br> //Prototypkettenvererbung fortsetzen<br> Funktion Brother(){ //Brother-Konstruktion<br> This.weight = 60;<br> }<br> Brother.prototype = new Child();//Vererbung der Prototypkette fortsetzen<br> var Bruder = neuer Bruder();<br> Alert(brother.name);//Erbt Eltern und Kind, öffnet Mike<br> ​​alert(brother.age);//pop-up 12<br> </script>

Der obigen Prototyp-Kettenvererbung fehlt ein Glied, nämlich Object. Alle Konstruktoren erben von Object. Die Vererbung von Objekten erfolgt automatisch und erfordert keine manuelle Vererbung. Was ist also ihre Zugehörigkeit?

Bestimmen Sie die Beziehung zwischen Prototyp und Instanz

Die Beziehung zwischen Prototypen und Instanzen kann auf zwei Arten bestimmt werden. Operator-Instanceof- und isPrototypeof()-Methoden:

Code kopieren Der Code lautet wie folgt:

Alert(Bruderinstanz des Objekts)//true
Alert(Test-Instanz von Brother);//false, Test ist die Superklasse von Brother
Alert(Bruderinstanz des Kindes);//true
Alert(Bruder-Instanz von Parent);//true

Solange es sich um einen Prototyp handelt, der in der Prototypenkette erscheint, kann man sagen, dass es sich um den Prototyp der aus der Prototypenkette abgeleiteten Instanz handelt. Daher gibt die Methode isPrototypeof() auch true zurück

In js wird die geerbte Funktion als Supertyp bezeichnet (übergeordnete Klasse, Basisklasse ist ebenfalls akzeptabel) und die geerbte Funktion wird als Untertyp (Unterklasse, abgeleitete Klasse) bezeichnet. Bei der Verwendung der prototypischen Vererbung gibt es zwei Hauptprobleme:
Erstens wird durch das wörtliche Überschreiben des Prototyps die Beziehung unterbrochen und der Prototyp des Referenztyps verwendet, und der Untertyp kann keine Parameter an den Obertyp übergeben.

Pseudoklassen lösen das Problem der Referenzfreigabe und der Unfähigkeit, Parameter von Supertypen zu übergeben. Wir können die „geliehene Konstruktor“-Technologie verwenden

Konstruktor ausleihen (Klassenvererbung)

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion Parent(age){<br> This.name = ['mike','jack','smith'];<br> This.age = Alter;<br> } <p>Funktion Kind(Alter){<br>         Parent.call(this,age);<br> }<br> var test = new Child(21);<br> alarm(test.age);//21<br> ​​alert(test.name);//mike,jack,smith<br> Test.name.push('bill');<br> ​​ Alert(test.name);//mike,jack,smith,bill<br> </script>

Obwohl das Ausleihen von Konstruktoren die beiden gerade genannten Probleme löst, ist eine Wiederverwendung ohne Prototypen unmöglich. Daher benötigen wir eine Prototypenkette zum Ausleihen von Konstruktoren. Dieses Muster wird als kombinierte Vererbung bezeichnet

Kombinierte Vererbung

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion Parent(age){<br> This.name = ['mike','jack','smith'];<br> This.age = Alter;<br> }<br> Parent.prototype.run = function () {<br>           return this.name ' are Both' this.age;<br> };<br> Funktion Kind(Alter){<br> ​​​ Parent.call(this,age);//Objektidentitätswechsel, Übergabe von Parametern an den Supertyp<br> }<br> Child.prototype = new Parent();//Prototyp-Kettenvererbung<br> var test = new Child(21);//Sie können auch new Parent(21) schreiben<br> alarm(test.run());//mike,jack,smith sind beide21<br> </script>

Kombinierte Vererbung ist eine häufig verwendete Vererbungsmethode. Die Idee dahinter besteht darin, die Prototypenkette zum Erben von Prototypeigenschaften und -methoden zu verwenden und Konstruktoren zum Erben von Instanzeigenschaften auszuleihen. Auf diese Weise wird die Wiederverwendung von Funktionen durch die Definition von Methoden im Prototyp erreicht, und jede Instanz verfügt garantiert über ihre eigenen Attribute.

Verwendung von call(): Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

Code kopieren Der Code lautet wie folgt:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Prototypische Vererbung

Diese Art der Vererbung verwendet Prototypen, um neue Objekte basierend auf vorhandenen Objekten zu erstellen, ohne benutzerdefinierte Typen zu erstellen. Dies wird als prototypische Vererbung bezeichnet

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion obj(o){<br>           Funktion F(){}<br>             F.prototype = o;<br>            neues F();<br> zurückgeben }<br> var box = {<br> Name: 'trigkit4',<br> arr: ['Bruder', 'Schwester', 'Baba']<br> };<br> var b1 = obj(box);<br> ​​alarm(b1.name);//trigkit4 <p> b1.name = 'mike';<br> alarm(b1.name);//mike</p> <p> Alert(b1.arr);//Bruder, Schwester, Baba<br> b1.arr.push('parents');<br> Alert(b1.arr);//Bruder, Schwester, Baba, Eltern</p> <p> var b2 = obj(box);<br> ​​alarm(b2.name);//trigkit4<br> Alert(b2.arr);//Bruder, Schwester, Baba, Eltern<br> </script>

Prototypische Vererbung erstellt zunächst einen temporären Konstruktor innerhalb der obj()-Funktion, verwendet dann das eingehende Objekt als Prototyp dieses Konstruktors und gibt schließlich eine neue Instanz dieses temporären Typs zurück.

Parasitäre Vererbung

Diese Vererbungsmethode kombiniert das Prototyp-Factory-Muster mit dem Zweck, den Erstellungsprozess zu kapseln.

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion create(o){<br> var f= obj(o);<br>             f.run = function () {<br>                 return this.arr;//In ähnlicher Weise wird die Referenz geteilt <br>         };<br>          return f;<br> }<br> </script>

Kleine Probleme bei kombinierter Vererbung

Kombinierte Vererbung ist das am häufigsten verwendete Vererbungsmuster in js, aber der Supertyp der kombinierten Vererbung wird während der Verwendung zweimal aufgerufen, einmal beim Erstellen des Untertyps und das andere Mal innerhalb des Untertypkonstruktors

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion Parent(name){<br> This.name = name;<br> This.arr = ['brother','sister','parents'];<br> } <p> Parent.prototype.run = function () {<br>          return this.name;<br> };</p> <p> Funktion Kind(Name,Alter){<br>         Parent.call(this,age);//Zweiter Anruf<br> This.age = Alter;<br> }</p> <p> Child.prototype = new Parent();//Erster Aufruf<br> </script>

Der obige Code ist die vorherige Kombinationsvererbung, sodass die parasitäre Kombinationsvererbung das Problem von zwei Aufrufen löst.

Parasitäre kombinatorische Vererbung

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion obj(o){<br>          Funktion F(){}<br>           F.prototype = o;<br>           neues F();<br> zurückgeben }<br> Funktion create(parent,test){<br>         var f = obj(parent.prototype);//Objekt erstellen<br>             f.constructor = test;//Erweiterungsobjekt<br> } <p> Funktion Parent(name){<br> This.name = name;<br> This.arr = ['brother','sister','parents'];<br> }</p> <p> Parent.prototype.run = function () {<br>          return this.name;<br> };</p> <p> Funktion Kind(Name,Alter){<br>          Parent.call(this,name);<br> This.age =age;<br> }</p> <p> inheritPrototype(Parent,Child);// Die Vererbung wird hier erreicht</p> <p> var test = new Child('trigkit4',21);<br> Test.arr.push('nephew');<br> alarm(test.arr);//<br> alarm(test.run());//Nur die Methode wird geteilt</p> <p> var test2 = new Child('jack',22);<br> Alert(test2.arr);//Angebotsproblemlösung<br> </script>

Anrufen und bewerben

Mit den globalen Funktionen apply und call kann der Zeiger hierfür in der Funktion wie folgt geändert werden:

Code kopieren Der Code lautet wie folgt:

//Definieren Sie eine globale Funktion
Funktion foo() {
console.log(this.fruit);
}

// Definiere eine globale Variable
var Fruit = „Apfel“;
// Passen Sie ein Objekt an
var pack = {
        Frucht: „Orange“
};

// Äquivalent zu window.foo();
foo.apply(window); // „apple“, zu diesem Zeitpunkt ist dies gleich window
//Dies in foo zu diesem Zeitpunkt === pack
foo.apply(pack); // "orange"