Heim > Web-Frontend > js-Tutorial > Hauptteil

Vererbung in JS verstehen

jacklove
Freigeben: 2018-06-15 15:43:07
Original
2615 Leute haben es durchsucht

Prototypische Vererbung von js

Die Prototypenkette ist die Hauptmethode zur Implementierung der js-Vererbung. Ihr Prinzip besteht darin, Prototypen zu verwenden, um einem Referenztyp die Eigenschaften und Methoden eines anderen Referenztyps erben zu lassen. Wenn wir ein Prototypobjekt einer Instanz gleichsetzen, enthält das Prototypobjekt zu diesem Zeitpunkt einen Zeiger auf einen anderen Prototyp. Wenn ein anderer Prototyp einer Instanz eines Objekts entspricht, ist dies das Grundkonzept der Prototypenkette.

Das Folgende ist ein einfaches Beispiel

    var Parent = function(){
        this.name = 'parent' ;
    } ;
    Parent.prototype.getName = function(){
        return this.name ;
    } ;
    Parent.prototype.obj = {a : 1} ;    var Child = function(){
        this.name = 'child' ;
    } ;
    Child.prototype = new Parent() ;    var parent = new Parent() ;    var child = new Child() ;
    console.log(parent.getName()) ; //parent
    console.log(child.getName()) ; //child
Nach dem Login kopieren

Der obige Code definiert zwei Typen: Eltern und Kind. Jeder Typ verfügt über eine Eigenschaft und eine Methode. Der Hauptunterschied besteht darin, dass das Kind das übergeordnete Objekt erbt. Ersetzen Sie es durch eine neue Instanz. Weisen Sie das Objekt der übergeordneten Klasse direkt dem Prototyp des Konstruktors der Unterklasse zu, sodass das Objekt der Unterklasse auf die Eigenschaften im Prototyp der übergeordneten Klasse und im Konstruktor der übergeordneten Klasse zugreifen kann.
Wir können den Operator „instanceof“ zur Beurteilung verwenden. Verwenden Sie diesen Operator, um die Instanz und den Konstruktor zu testen, die in der Prototypenkette erscheinen, und er wird „true“ zurückgeben.


Ausleihen des Konstruktors

Was ist ein Konstruktor?

Der Konstruktor von JavaScript existiert nicht als spezifische Methode einer Klasse. Wenn eine gewöhnliche Funktion zum Erstellen einer Klasse von Objekten verwendet wird, wird sie als Konstruktor oder Konstruktor bezeichnet. Damit eine Funktion als echter Konstruktor dienen kann, muss sie die folgenden Bedingungen erfüllen:

1. Legen Sie die Eigenschaften des neuen Objekts (dieses) innerhalb der Funktion fest, normalerweise durch Hinzufügen von Eigenschaften und Methoden.

2. Der Konstruktor kann eine Rückgabeanweisung enthalten (nicht empfohlen), aber der Rückgabewert muss dieser oder ein anderer Wert sein, der kein Objekttyp ist.

Ein Bereich, der bei JavaScript-Konstruktoren leicht verwirrend ist, ist das Konstruktorattribut des Prototyps. In JavaScript verfügt jede Funktion über ein Standardobjektattribut „Prototyp“, das standardmäßig zwei Mitgliedsattribute enthält: Konstruktor und
Proto. Die Details des Prototyps werden in diesem Artikel nicht besprochen. Was uns jetzt beschäftigt, ist das Konstruktorattribut.

Nach dem üblichen objektorientierten Denken sagen wir, dass der Konstruktor der Definition von „Klasse“ entspricht, daher denken wir möglicherweise, dass das Konstruktorattribut der eigentliche Konstruktor der Klasse ist Erstellt ein Objekt. Manchmal wird der Konstruktor direkt aufgerufen, um das Objekt zu initialisieren, was ein großer Fehler ist. Der eigentliche Prozess der Ausführung des neuen Ausdrucks wurde oben vorgestellt (vier Schritte). Der dritte Schritt wird zum Initialisieren des Objekts verwendet. Die aufgerufene Initialisierungsfunktion ist die „Klassenfunktion“ selbst, nicht der Konstruktor

    function CO(){
    this.p = “I’m in constructed object”;    this.alertP = function(){
        alert(this.p);
        }
    }    var o2 = new CO();
Nach dem Login kopieren

Ausleihe Konstruktorvererbung

Die Grundidee ist sehr einfach, nämlich den Supertyp-Konstruktor innerhalb des Subtyp-Konstruktors aufzurufen. Da Funktionen nichts anderes als Objekte sind, die Code in einer bestimmten Umgebung ausführen, können Konstruktoren mithilfe der Methoden apply() und call() auch auf neu erstellten Objekten ausgeführt werden.

   function superType(){
       this.colors = ["red","blue","green"];
   }   function subtype(){
       superType.call(this);
   }   var instance1 = new subtype();
   instance1.colors.push("black");
   alert(instance1.colors);//"red,blue,green,black"
   var instance2 = new subtype();
   alert(instance2.colors);//"red,blue,green"
Nach dem Login kopieren

Durch die Verwendung von call() rufen wir tatsächlich den Supertype()-Konstruktor im Kontext der neu erstellten Subtyp-Instanz auf. Auf diese Weise wird der Supertype-Konstruktor auf dem neuen Subtyp-Objekt ausgeführt, also Alle Der in der Funktion supertype() definierte Objektinitialisierungscode wird auf dem Subtyp-Objekt ausgeführt

   function superType(name){
       this.name = name;
   }   function subtype(){
       superType.call(this,"Marry");       this.age = 29;
   }   var instance = new subtype();
   alert(instance.name);//"Marry"
   alert(instance2.age);//"29"
Nach dem Login kopieren
Dies ist ein großer Vorteil des Konstruktors. Sie können Parameter an den Supertyp-Konstruktor übergeben.

In diesem Artikel wird das Verständnis der JS-Vererbung erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JS-Entschlüsselung, Online-JS-Entschlüsselung Entschlüsselung

So optimieren Sie JS-Code

JavaScript lokales Objekt

Das obige ist der detaillierte Inhalt vonVererbung in JS verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!