Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

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:

Bildbeschreibung hier einfügen

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.

Bildbeschreibung hier einfügen

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.

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

7. Zusammenfassung:

Verfahren Vorteil Mangel
Vererbung von Prototypketten Kann Eigenschaften und Methoden vom übergeordneten Prototyp erben usw. Parameter können nicht übergeben werden, Konflikte bei Referenztypattributen usw.
Konstruktorvererbung ausleihen Parameter können übergeben werden, es kommt nicht zu Konflikten bei Referenztypattributen usw. Methoden können nicht vom übergeordneten Prototyp usw. geerbt werden.
Vererbung von Kompositionen Es hat die Vorteile der beiden oben genannten und löst ihre Nachteile Durch zweimaliges Aufrufen der übergeordneten Instanz werden zwei Kopien derselben Eigenschaften usw. erstellt.
Parasitäre kompositorische Vererbung Es hat die oben genannten drei Vorteile und löst seine Nachteile Vielleicht nicht sehr intuitiv usw. …
Klassenvererbung es6 neue Syntax, prägnant und intuitiv usw. Niedrigere IE-Versionen unterstützen es6 usw. nicht.

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:
  • Detaillierte Erläuterung der Js-Klassenkonstruktion und Vererbungsfälle
  • Wie gut wissen Sie über die Vererbung in JavaScript?
  • Unterschiede zwischen ES6-Vererbung und ES5-Vererbung in js
  • Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript
  • Erläuterung der objektorientierten Klassenvererbung in JavaScript
  • Ausführliche Erläuterung der verschiedenen Methoden sowie der Vor- und Nachteile der JavaScript-Vererbung

<<:  So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux

>>:  Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64

Artikel empfehlen

Vue CodeMirror realisiert den Effekt des Online-Code-Compilers

Vorwort Wenn wir den Effekt der Online-Codekompil...

3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

Inhaltsverzeichnis 1. Der magische Erweiterungsop...

Tipps zur Verwendung des Befehls „Docker Inspect“

Beschreibung und Einführung Docker Inspect ist ei...

Detaillierte Erklärung der XML-Syntax

1. Dokumentationsregeln 1. Groß-/Kleinschreibung b...

Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS

In diesem Artikelbeispiel wird der spezifische JS...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Grafisches Tutorial zur Deinstallation und Installation von MySQL unter Linux

Dies ist mein erster Blog. Ich bin seit zwei Jahr...

Vue – Erste Schritte mit der Wettervorhersage

In diesem Artikelbeispiel wird der spezifische Co...