Heim Web-Frontend js-Tutorial So implementieren Sie eine parasitäre zusammensetzbare Vererbung mithilfe von JavaScript

So implementieren Sie eine parasitäre zusammensetzbare Vererbung mithilfe von JavaScript

Jun 13, 2018 pm 02:40 PM
javascript 继承

In diesem Artikel wird hauptsächlich die parasitäre kombinierte Vererbung von JavaScript vorgestellt und die Prinzipien, Implementierungsmethoden und zugehörigen Vorsichtsmaßnahmen in Form von Beispielen im Detail analysiert. Freunde in Not können sich darauf beziehen.

Die Beispiele in In diesem Artikel wird die parasitäre zusammensetzbare Vererbung von JavaScript beschrieben. Ich teile es Ihnen als Referenz mit:

Tatsächlich enthält das Buch „JavaScript Advanced Programming“ bereits den vollständigen Code Bei der Vererbung geht es darum.

Zuallererst gibt es in js zwei Möglichkeiten, Attribute für Objekte zu definieren:

//通过执行构造函数设置属性
function A(){
  this.a = 1;
}
//通过原型设置属性
A.prototype.b = 1;
Nach dem Login kopieren

Also:

Wenn eine Klasse Sub eine andere Klasse Super erben möchte, dann Sie müssen die Attribute der übergeordneten Klasse unter dem Prototyp erben. Außerdem müssen Sie den Konstruktor der übergeordneten Klasse ausführen.

Das heißt, Damit eine Klasse Sub eine andere Klasse Super erben kann, muss sie nicht nur die Prototypeigenschaften und -methoden über die Prototypenkette erben, sondern die Vererbung auch durch Aufrufen des Konstruktors der übergeordneten Klasse innerhalb der Klasse realisieren Unterklassenkonstruktor. Vererbung von Instanzeigenschaften.

1. Vererben Sie die Attribute unter dem Prototyp

Wie Sie oben sehen können, werden die Attribute unter dem Prototyp der Super-Klasse nicht vererbt, daher muss dies in diesem Teil geschehen unten vererbt werden.

Direct "=" wird definitiv nicht funktionieren, da es nach dem Ändern der Eigenschaften in Sub.prototype keine Auswirkungen auf die Objekte in Super.prototype haben kann, d. h. nicht Sub.prototype=Super.prototype.

Schreiben Sie zunächst eine Methode, um eine Kopie des Objekts zu erstellen

function object(o){
  function A(){}
  A.prototype = o
  var ox = new A()
  return ox
}
Nach dem Login kopieren

Das durch die obige Funktion erhaltene Objekt ox verfügt über alle Attribute des Objekts o (in der Prototypenkette) und modifiziert die Attribute von ox hat keine Auswirkungen auf o, was dem Erstellen einer Kopie von o entspricht.

Prototypische Vererbung ist die oben genannte „Objekt“-Funktion, die in vielen Quellcodes der Klassenbibliothek zu finden ist.

Einfach ausgedrückt bedeutet prototypische Vererbung, dass die übergeordnete Klasse nicht direkt instanziiert werden muss Durch das Instanziieren einer temporären Kopie wird dieselbe Prototypkettenvererbung implementiert. (Das heißt, der Prototyp der Unterklasse verweist auf die Instanz der Kopie der übergeordneten Klasse, um die gemeinsame Nutzung von Prototypen zu erreichen.)

Tipps:Wie wir alle wissen, wird die Vererbung der Prototypenkette durch erreicht Verweisen des Prototyps der Unterklasse auf die Instanz der übergeordneten Klasse und Prototypvererbung bedeutet, dass der Prototyp der Unterklasse auf eine Instanz der Kopie der übergeordneten Klasse verweist, um eine Prototypenfreigabe zu erreichen .

ECMAScirpt 5 standardisiert die prototypische Vererbung durch die neue Object.create()-Methode.

Mit der Objektmethode können Sie die Eigenschaften von Super.prototype nach Sub.prototype „kopieren“. Natürlich müssen Sie hier auch die Ausrichtung des Konstruktors korrigieren.

function inherit(subType,superType){
 var prototype=Object.create(superType.prototype);
 prototype.constructor=subType;
 subType.prototype=prototype;
}
Nach dem Login kopieren

2. Führen Sie die Konstruktoren der übergeordneten Klasse bzw. der Unterklasse aus und erben Sie die Attribute unter diesem Teil:

//父类
function Super(){
this.sss=1
}
//子类
function Sub(){
//arguments是Sub收到的参数,将这个参数传给Super
Super.apply(this, arguments)
}
//实例
sub = new Sub()
Nach dem Login kopieren

Super.apply(this, arguments)Verwenden Sie in diesem Satz die Super-Klasse als Eine normale Funktion wird ausgeführt, aber diese der Super-Klasse wird durch die der Sub-Klasse ersetzt, und die von Sub empfangenen Parameter werden auch an Super übergeben

Das endgültige Ausführungsergebnis entspricht sub .sss=1

Im Anhang sind die Merkmale, Vor- und Nachteile verschiedener Vererbungsmethoden aufgeführt

Es gab eine Zeit, in der JavaScript die Vererbung von Klassenimplementierungen nicht standardisierte, was dazu führte Verschiedene Codes zum Implementieren der Vererbung. Unabhängig davon, wie sich der Code ändert, basiert die Vererbung auf zwei Methoden:

1 Durch die Prototypenkette , dh den Prototyp der Unterklasse zeigt auf die Instanz der übergeordneten Klasse, um die gemeinsame Nutzung von Prototypen zu erreichen.
2. Leihen Sie sich den Konstruktor aus, d. h. über js's apply und call kann die Unterklasse die Attribute und Methoden der übergeordneten Klasse aufrufen kann alle gemeinsam genutzten Attributmethoden implementieren, aber Attribute und Methoden können nicht exklusiv sein

(z. B. ändert Sub1 die Funktion der übergeordneten Klasse und alle anderen Unterklassen Sub2, Sub3 ... können die alte Funktion nicht aufrufen

). Und geliehener Konstruktor

kann nicht nur exklusive Eigenschaften und Methoden haben, sondern auch Parameter im Unterklassenkonstruktor übergeben, der Code kann jedoch nicht wiederverwendet werden. Im Allgemeinen kann

die ausschließliche Nutzung aller Attributmethoden erreichen, aber keine Attribute und Methoden gemeinsam nutzen (z. B. wenn Sub1 eine neue Funktion hinzufügt und diese dann in Sub2, Sub3 ... verwenden möchte). realisiert werden, können jeweils nur Sub2, Sub3... im Konstruktor hinzugefügt werden). Kombinierte Vererbung besteht darin, die beiden oben genannten Vererbungsmethoden zusammen zu verwenden. Gemeinsame Eigenschaften und Methoden werden mithilfe der Prototypenkettenvererbung implementiert, und exklusive Eigenschaften und Methoden werden mithilfe geliehener Konstruktoren implementiert js. Vererbung; warum heißt es „fast“? Weil Geeks, die es ernst meinen, entdeckt haben, dass es einen kleinen Fehler in der kombinatorischen Vererbung gibt. Bei der Implementierung wurde die Superklasse (Elternklasse) zweimal aufgerufen. Ist es möglich, dass die Leistung nicht dem Standard entspricht? Wie kann man es lösen? So entstand „parasitäre Vererbung“.

Parasitäre Vererbung (prototypische Vererbung) bedeutet, dass keine Instanziierung der übergeordneten Klasse erforderlich ist. Durch die direkte Instanziierung einer temporären Kopie wird dieselbe Prototypkettenvererbung implementiert. (Das heißt, der Prototyp der Unterklasse verweist auf die Instanz der Kopie der übergeordneten Klasse, um eine gemeinsame Nutzung des Prototyps zu erreichen.)

„Parasitische Kombinationsvererbung“ verwendet „parasitäre Vererbung“, um den kleinen Fehler zu beheben „Kombinationsvererbung“, wodurch die perfekte Implementierung von js vererbt wird.

Beispielcode:

function SuperType(name,colors){
  this.name=name;
  this.colors=colors;
}
SuperType.prototype.getSuperProperty=function(){ return this.name; }
function SubType(job,name,colors){
  SuperType.call(this,name,colors);
  this.job=job;
}
SubType.prototype.getSubPrototype=function(){ return this.job; }
function inherit(subType,superType){
  var prototype=Object.create(superType.prototype);
  prototype.constructor=subType;
  subType.prototype=prototype;
}
inherit(SubType,SuperType);
var instance=new SubType("doctor","John",["red","green"]);
console.log(instance.getSubPrototype());  //输出"doctor"
console.log(instance.getSuperProperty());  //输出"John",成功调用在父类原型定义的方法
Nach dem Login kopieren
Der Attribut-Vererbungscode lautet

Der Prototyp-Vererbungscode lautetSuperType.call(this,name,colors);

Das Obige habe ich zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. inherit(SubType,SuperType);

Verwandte Artikel:

So implementieren Sie die Kollisionserkennung in JS

Wie verwende ich sie mit Gulp und Bower in Angular1?

Welche Methoden gibt es zum Debuggen von JS-Skripten?

So implementieren Sie ein Suchfeld mit Angular

Detaillierte Einführung in die Interpolation in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine parasitäre zusammensetzbare Vererbung mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Detaillierte Erläuterung der C++-Funktionsvererbung: Wie werden „Basisklassenzeiger' und „abgeleitete Klassenzeiger' bei der Vererbung verwendet? Detaillierte Erläuterung der C++-Funktionsvererbung: Wie werden „Basisklassenzeiger' und „abgeleitete Klassenzeiger' bei der Vererbung verwendet? May 01, 2024 pm 10:27 PM

Verwenden Sie bei der Funktionsvererbung „Basisklassenzeiger“ und „abgeleitete Klassenzeiger“, um den Vererbungsmechanismus zu verstehen: Wenn der Basisklassenzeiger auf das abgeleitete Klassenobjekt zeigt, wird eine Aufwärtstransformation durchgeführt und nur auf die Mitglieder der Basisklasse zugegriffen. Wenn ein abgeleiteter Klassenzeiger auf ein Basisklassenobjekt zeigt, wird eine Abwärtsumwandlung durchgeführt (unsicher) und muss mit Vorsicht verwendet werden.

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Ausführliche Erklärung der C++-Funktionsvererbung: Wie kann man Fehler bei der Vererbung debuggen? Ausführliche Erklärung der C++-Funktionsvererbung: Wie kann man Fehler bei der Vererbung debuggen? May 02, 2024 am 09:54 AM

Tipps zum Debuggen von Vererbungsfehlern: Stellen Sie sicher, dass die Vererbungsbeziehungen korrekt sind. Verwenden Sie den Debugger, um den Code schrittweise durchzugehen und Variablenwerte zu untersuchen. Stellen Sie sicher, dass Sie den virtuellen Modifikator richtig verwenden. Untersuchen Sie das Problem der Vererbungsdiamanten, das durch versteckte Vererbung verursacht wird. Suchen Sie nach nicht implementierten rein virtuellen Funktionen in abstrakten Klassen.

Ausführliche Erklärung der C++-Funktionsvererbung: Wie versteht man die Beziehung „is-a' und „has-a' bei der Vererbung? Ausführliche Erklärung der C++-Funktionsvererbung: Wie versteht man die Beziehung „is-a' und „has-a' bei der Vererbung? May 02, 2024 am 08:18 AM

Detaillierte Erläuterung der C++-Funktionsvererbung: Beherrschen Sie die Beziehung zwischen „is-a“ und „has-a“ Was ist Funktionsvererbung? Funktionsvererbung ist eine Technik in C++, die in einer abgeleiteten Klasse definierte Methoden mit in einer Basisklasse definierten Methoden verknüpft. Es ermöglicht abgeleiteten Klassen, auf Methoden der Basisklasse zuzugreifen und diese zu überschreiben, wodurch die Funktionalität der Basisklasse erweitert wird. „Ist-ein“- und „Hat-ein“-Beziehungen Bei der Funktionsvererbung bedeutet die „Ist-ein“-Beziehung, dass die abgeleitete Klasse ein Untertyp der Basisklasse ist, d. h. die abgeleitete Klasse „erbt“ die Merkmale und das Verhalten von die Basisklasse. Die „has-a“-Beziehung bedeutet, dass die abgeleitete Klasse einen Verweis oder Zeiger auf das Basisklassenobjekt enthält, d. h. die abgeleitete Klasse „besitzt“ das Basisklassenobjekt. SyntaxDas Folgende ist die Syntax für die Implementierung der Funktionsvererbung: classDerivedClass:pu

Wie wirken sich Vererbung und Polymorphismus auf die Klassenkopplung in C++ aus? Wie wirken sich Vererbung und Polymorphismus auf die Klassenkopplung in C++ aus? Jun 05, 2024 pm 02:33 PM

Vererbung und Polymorphismus wirken sich auf die Kopplung von Klassen aus: Vererbung erhöht die Kopplung, da die abgeleitete Klasse von der Basisklasse abhängt. Polymorphismus reduziert die Kopplung, da Objekte über virtuelle Funktionen und Basisklassenzeiger konsistent auf Nachrichten reagieren können. Zu den Best Practices gehören der sparsame Umgang mit der Vererbung, die Definition öffentlicher Schnittstellen, das Vermeiden des Hinzufügens von Datenelementen zu Basisklassen und die Entkopplung von Klassen durch Abhängigkeitsinjektion. Ein praktisches Beispiel, das zeigt, wie Polymorphismus und Abhängigkeitsinjektion verwendet werden, um die Kopplung in einer Bankkontoanwendung zu reduzieren.

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

„Einführung in die objektorientierte Programmierung in PHP: Vom Konzept zur Praxis' „Einführung in die objektorientierte Programmierung in PHP: Vom Konzept zur Praxis' Feb 25, 2024 pm 09:04 PM

Was ist objektorientierte Programmierung? Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das reale Entitäten in Klassen abstrahiert und Objekte zur Darstellung dieser Entitäten verwendet. Klassen definieren die Eigenschaften und das Verhalten von Objekten und Objekte instanziieren Klassen. Der Hauptvorteil von OOP besteht darin, dass Code einfacher zu verstehen, zu warten und wiederzuverwenden ist. Grundkonzepte von OOP Zu den Hauptkonzepten von OOP gehören Klassen, Objekte, Eigenschaften und Methoden. Eine Klasse ist der Bauplan eines Objekts, der seine Eigenschaften und sein Verhalten definiert. Ein Objekt ist eine Instanz einer Klasse und verfügt über alle Eigenschaften und Verhaltensweisen der Klasse. Eigenschaften sind Merkmale eines Objekts, das Daten speichern kann. Methoden sind Funktionen eines Objekts, die mit den Daten des Objekts arbeiten können. Vorteile von OOP Zu den Hauptvorteilen von OOP gehören: Wiederverwendbarkeit: OOP kann den Code erweitern

Java-Schnittstellen und abstrakte Klassen: Der Weg zum Programmierhimmel Java-Schnittstellen und abstrakte Klassen: Der Weg zum Programmierhimmel Mar 04, 2024 am 09:13 AM

Schnittstelle: Eine implementierte Vertragsschnittstelle definiert eine Reihe von Methodensignaturen in Java, stellt jedoch keine konkrete Implementierung bereit. Es fungiert als Vertrag, der Klassen, die die Schnittstelle implementieren, dazu zwingt, ihre angegebenen Methoden zu implementieren. Die Methoden in der Schnittstelle sind abstrakte Methoden und haben keinen Methodenkörper. Codebeispiel: publicinterfaceAnimal{voideat();voidsleep();} Abstrakte Klasse: Teilweise implementierter Entwurf Eine abstrakte Klasse ist eine übergeordnete Klasse, die eine teilweise Implementierung bereitstellt, die von ihren Unterklassen geerbt werden kann. Im Gegensatz zu Schnittstellen können abstrakte Klassen konkrete Implementierungen und abstrakte Methoden enthalten. Abstrakte Methoden werden mit dem Schlüsselwort abstract deklariert und müssen von Unterklassen überschrieben werden. Codebeispiel: publicabstractcla

See all articles