1. Einleitung: Hallo, wie geht es euch allen in letzter Zeit?😃 Funktionsvererbung ist ein grundlegender und wichtiger Bestandteil von JS und wird auch in Interviews häufig danach gefragt. Im Folgenden wird schnell gezeigt, welche Vererbungsmethoden in JS üblich sind und beherrscht werden müssen. Wenn du die folgenden Inhalte beherrschst, wirst du beim Vorstellungsgespräch keine Probleme haben~ Dies erfordert natürlich eine gewisse Grundlage der Prototypenkette. Wenn Sie mit der Prototypenkette nicht vertraut sind, können Sie meinen Artikel 👉 lesen: Schnelles Verständnis der JS-Prototypenkette. 2. Vererbung der Prototypkette:Der entscheidende Punkt bei der Vererbung in der Prototypkette besteht darin, dass die Instanz der übergeordneten Klasse als Prototyp der untergeordneten Klasse dient. Schauen Sie sich das folgende Beispiel an: // Übergeordnete Funktion Person Funktion Person(Name, Alter) { // Definieren Sie einige Eigenschaften this.name = name; dieses.Alter = Alter; this.nature = ["Polarlichter", "Wind", "Mond"]; } // Definieren Sie eine Methode für den Personenprototyp Person.prototype.sayLove = function () { console.log(dieser.name + " like " + diese.nature[0]); }; // Unterfunktion Jack Funktion Jack() {} // Die Instanz der übergeordneten Klasse wird als Prototyp der untergeordneten Klasse verwendet (-------------------Implementierungskern--------------------------) Jack.prototype = neue Person(); Nun erstellen wir zwei Instanzen von Jack und testen, ob die Vererbung von Person implementiert ist: var jack1 = neuer Jack(); var jack2 = neuer Jack(); jack2.nature[0] = "Meer"; jack1.sayLove(); jack2.sayLove(); Konsole.log(jack1.nature); Konsole.log(jack2.nature); Aus den Laufergebnissen ist ersichtlich, dass es tatsächlich geerbt wird und die Methode sayLove ausgeführt werden kann. Es gibt jedoch viele Nachteile. Beim Erstellen einer Jack-Instanz können die Parameter Name und Alter nicht übergeben werden, und die Naturreferenztypattribute verschiedener Instanzen beeinflussen sich gegenseitig. Wenn eines geändert wird, ändern sich alle: 3. Ausleihen der Konstruktorvererbung (Objektverkleidung):Der Kern liegt im „Konstruktor-Diebstahl“. Rufen Sie den Konstruktor der übergeordneten Klasse vom Konstruktor der untergeordneten Klasse aus auf. Schließlich sind Funktionen einfach Objekte, die Code in einem bestimmten Kontext ausführen. Sie können also die Methoden apply() und call() verwenden, um den Konstruktor mit dem neu erstellten Objekt als Kontext auszuführen. Es kann den Konflikt zwischen Parametern und Referenztypeigenschaften bei der Vererbung von Prototypketten lösen. Oder schauen Sie sich das Beispiel direkt an: // Übergeordnete Funktion Person Funktion Person(Name, Alter) { // Definieren Sie einige Eigenschaften this.name = name; dieses.Alter = Alter; this.nature = ["Polarlichter", "Wind", "Mond"]; } // Definieren Sie eine Methode für den Personenprototyp Person.prototype.sayLove = function () { console.log(dieser.name + " like " + diese.nature[0]); }; // Unterfunktion Lucy Funktion Lucy(Name, Alter) { // Dies durch einen Aufruf auf Lucy zu verweisen, ist gleichbedeutend mit dem Kopieren des Inhalts in der übergeordneten Funktion Person (---------Implementierungskern--------------) Person.call(dies, Name, Alter); } // Definieren Sie eine Methode für den Prototyp der untergeordneten Funktion Lucy.prototype.syaName = function () { console.log("Mein Name ist " + dieser.name); }; Nun erstellen wir zwei Instanzen von Lucy und testen, ob die Vererbung von Person umgesetzt ist: var lucy1 = neue Lucy("lucy1", "20"); var lucy2 = neue Lucy("lucy2", "22"); lucy2.nature[0] = "Meer"; Konsole.log(lucy1.name); Konsole.log(lucy1.nature); Konsole.log(lucy2.nature); lucy1.syaName(); lucy2.syaName(); lucy1.sayLove(); Dadurch ist Vererbung möglich, Parameter können übergeben werden und Referenztypeigenschaften beeinflussen sich nicht gegenseitig. Die Nachteile liegen jedoch auf der Hand. Sie sehen möglicherweise einen Fehler und können die sayLove-Methode nicht auf dem Prototyp der übergeordneten Klasse verwenden. 4. Kombinationsvererbung:Die zusammengesetzte Vererbung ist eine Vererbungsmethode, die die Kernimplementierungen der Prototypkettenvererbung und der geliehenen Konstruktorvererbung kombiniert. Sie kann Parameter übergeben, und die Referenztypeigenschaften beeinflussen sich nicht gegenseitig. Gleichzeitig kann die Unterklasse auch die Methode der übergeordneten Klasse abrufen. Dies ist derzeit auch die am häufigsten verwendete Vererbungsmethode. Schauen wir uns das Beispiel direkt an: // Übergeordnete Funktion Person Funktion Person(Name, Alter) { // Definieren Sie einige Eigenschaften this.name = name; dieses.Alter = Alter; this.nature = ["Polarlichter", "Wind", "Mond"]; } // Definieren Sie eine Methode für den Personenprototyp Person.prototype.sayLove = function () { console.log(dieser.name + " like " + diese.nature[0]); }; // Unterfunktion Lisa Funktion Lisa(Name, Alter) { // Dies durch einen Aufruf an Lisa zu verweisen, ist gleichbedeutend mit dem Kopieren des Inhalts in der übergeordneten Funktion Person (------Implementierungskern-----------) Person.call(dies, Name, Alter); } // Die Instanz der übergeordneten Klasse wird als Prototyp der untergeordneten Klasse verwendet. (---------------Implementierungskern-------------------) Lisa.prototype = neue Person(); // Ein kleiner Wissenspunkt: Hier soll Lisas Konstruktor erneut auf Lisa zeigen. Andernfalls zeigt der Konstruktor auf Person, da Lisas Prototyp eine Person-Instanz ist Lisa.prototype.constructor = Lisa; Nun erstellen wir zwei Instanzen von Lisa und testen, ob die Vererbung von Person umgesetzt ist: var lisa1 = neue Lisa("lisa1", "20"); var lisa2 = neue Lisa("lisa2", "21"); lisa2.nature[0] = "Meer"; console.log(lisa1.name); Konsole.log(lisa1.nature); Konsole.log(lisa2.nature); lisa1.sayLove(); lisa2.sayLove(); Sie sehen, dass die von uns übernommenen Funktionen grundsätzlich realisiert sind. Es behebt außerdem die Mängel der Prototypenverkettung und der übernommenen Konstruktorvererbung. Es gibt jedoch noch einen kleinen Nachteil. Sie können sehen, dass im Codekommentar-Implementierungskern „Person“ zweimal aufgerufen wird, sodass es beim Lisa-Prototyp und bei der Instanz zwei identische Eigenschaften gibt, was etwas Leistung einbüßt. 5. Parasitäre Kombinationsvererbung: Tatsächlich ähnelt die parasitäre Kompositionsvererbung der Kompositionsvererbung, hat jedoch eine zusätzliche Lösung mit dem Nachteil, dass der Prototyp und die Instanz der Kompositionsvererbung zwei Kopien derselben Eigenschaften erzeugen. Der Kern der Lösung besteht darin, dass keine neue Instanz der übergeordneten Klasse erstellt werden muss, da wir lediglich möchten, dass der Prototyp der Unterklasse dem Prototyp der übergeordneten Klasse zugewiesen wird. Erstellen Sie einfach ein neues Objekt, dessen Wert der Prototyp der übergeordneten Klasse ist, und weisen Sie es dann dem Prototyp der untergeordneten Klasse zu. Die Methode Object.create(proto, [propertiesObject]) wird verwendet, um ein neues Objekt zu erstellen. Das __proto__ des neuen Objekts entspricht seinem Parameter proto. Natürlich ist Object.create möglicherweise in niedrigeren IE-Versionen nicht verfügbar, daher wird die Methode Object.create unten auch benutzerdefiniert gekapselt, es handelt sich jedoch nur um eine einfache Kapselung. Schauen wir uns das Beispiel direkt an: // Übergeordnete Funktion Person Funktion Person(Name, Alter) { // Definieren Sie einige Eigenschaften this.name = name; dieses.Alter = Alter; this.nature = ["Polarlichter", "Wind", "Mond"]; } // Definieren Sie eine Methode für den Personenprototyp Person.prototype.sayLove = function () { console.log(dieser.name + " like " + diese.nature[0]); }; // Unterfunktion Andy Funktion Andy(Name, Alter) { Person.call(dies, Name, Alter); } // Wenn keine Methode Object.create() vorhanden ist, kapseln Sie einfach if (!Object.create) { Objekt.erstellen = Funktion (Proto) { Funktion Temp() {} Temp. Prototyp = Prototyp; gib neue Temperatur zurück(); }; } // Rufen Sie die Methode Object.create auf, um ein neues Bildpaar zu erstellen, dessen __proto__ Person.prototype ist, und weisen Sie es Andy.prototype zu (----------Implementierungskern----------) Andy.prototype = Objekt.erstellen(Person.prototype); //Ändern Sie den Konstruktor, sodass er auf Andy.prototype.constructor = Andy verweist. Nun erstellen wir zwei Instanzen von Andy und testen, ob die Vererbung von Person implementiert ist: Konsole.log(Andy.prototype.__proto__ === Person.prototype); var andy1 = neuer Andy("andy1", "20"); var andy2 = neuer Andy("andy2", "21"); andy2.nature[0] = "Meer"; console.log(andy1.name); Konsole.log(andy1.nature); Konsole.log(andy2.nature); andy1.sayLove(); andy2.sayLove(); Funktioniert einwandfrei: 6. Klassenvererbung:Nachdem ES6 die Klassensyntax vereinfacht hat, können Klassen durch Klassen definiert und Klassenvererbung implementiert werden. Schauen wir uns das Beispiel direkt an: //Definiere eine übergeordnete Klasse Animal Klasse Tier { //Hier zeigt der Konstruktor auf die Klasse selbst, genauso wie beim Verhalten von es5 constructor(name) { dieser.name = Name; } wieEssen() { console.log(dieser.Name + " wie essen " + dieses.Essen); } } //Definieren Sie eine Unterklasse Dog, die die übergeordnete Klasse Animal durch Erweiterungen erbt. Klasse Hund erweitert Tier { Konstruktor(Name, Essen) { //Erbe das Attribut super(name) der übergeordneten Klasse durch super(attribute name); dieses.Essen = Essen; } wieEssen() { //Erbe die Methode der übergeordneten Klasse durch super.+Methode der übergeordneten Klasse super.likeEat(); } } Erstellen Sie eine neue Dog-Instanz und testen Sie, ob Dog Animal erbt: var jinmao = neuer Hund("jinmao", "Knochen"); Konsole.log(jinmao.name); jinmao.likeEat(); Sie sehen, dass es perfekt umgesetzt ist: 7. Zusammenfassung:
Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können! Das könnte Sie auch interessieren:
|
<<: So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux
>>: Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64
Vorwort Wenn wir den Effekt der Online-Codekompil...
Nach den Änderungen: innodb_buffer_pool_size=576M...
Inhaltsverzeichnis 1. Der magische Erweiterungsop...
In diesem Artikel werden hauptsächlich die Unters...
Beschreibung und Einführung Docker Inspect ist ei...
1. Dokumentationsregeln 1. Groß-/Kleinschreibung b...
Problembeschreibung Ich möchte CSS verwenden, um ...
Wenn Sie eine Netzwerkanfrage senden, werden die ...
Der erste Artikel zum Thema Datensicherung und -w...
Inhaltsverzeichnis Vorwort iframe implementiert S...
In diesem Artikelbeispiel wird der spezifische JS...
MySQL ist ein relationales Datenbankverwaltungssy...
Dies ist mein erster Blog. Ich bin seit zwei Jahr...
Der erste Schritt besteht darin, die kostenlose I...
In diesem Artikelbeispiel wird der spezifische Co...