suchen
HeimWeb-Frontendjs-TutorialVergleichende Analyse mehrerer Vererbungsmethoden in Javascript-Programmierung_Javascript-Kenntnissen

Dieser Artikel analysiert den Vergleich mehrerer Vererbungsmethoden in der Javascript-Programmierung anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Eröffnung

Im „strengsten“ Sinne ist JavaScript keine echte objektorientierte Sprache. Der Grund für diese Aussage liegt im Allgemeinen darin, dass JavaScript als schwach typisierte Sprache sich stark von der Vererbungsmethode starker Sprachen wie Java oder C# unterscheidet und daher standardmäßig eine nicht gängige objektorientierte Methode ist Es gibt sogar viele. Das Buch beschreibt es als eine „nicht vollständig objektorientierte“ Sprache. Tatsächlich bin ich persönlich der Meinung, dass die Methode nicht wichtig ist. Wichtig ist, ob sie über objektorientiertes Denken verfügt. Leute, die sagen, dass JavaScript keine objektorientierte Sprache ist, haben sich möglicherweise nicht eingehend mit der Vererbungsmethode von JavaScript befasst Ich habe diesen Artikel zur Kommunikation geschrieben.

Warum Sie Javascript verwenden müssen, um die Vererbung zu implementieren

Die Leistung früher PC-Maschinen ist wirklich nicht schmeichelhaft. Der gesamte Druck lag auf der Serverseite und der Client-Browser war nur eine Dekoration. In Verbindung mit dem damals beliebten Tabellenlayout und dem Internetzugang per Telefon war das Surfen auf Webseiten sehr langsam; heute entwickelt sich das Internetzeitalter rasant, die Hardware von PCs wurde erheblich verbessert und auch die Leistung von Client-Browsern ist sehr enttäuschend. Auch das Modell der Webentwicklung verändert sich stillschweigend: Der Server soll nicht mehr so ​​„hart“ sein wie bisher. Auf diese Weise soll der Druck auf jeden einzelnen Client verteilt werden Durch die Kosteneinsparung im Unternehmen wird auch die Web-Front-End-Entwicklung interessanter – es entstehen immer mehr Front-End-Frameworks und sogar viele Front-End-MVC-Frameworks. In diesem Zusammenhang besteht die Rolle von JavaScript definitiv nicht nur darin, eine einfache Überprüfung durchzuführen, einige Anforderungen zu senden oder ein DOM zu betreiben. Es muss mehr Rollen wie Front-End-Routing und Business-Schicht übernehmen, und JavaScript muss viele logische Aufgaben übernehmen Aufgaben, die die Abstraktion von Front-End-Daten (d. h. Modellen) umfassen, und nur durch die Verwendung von objektorientiertem Denken können die abstrahierten Daten gut verarbeitet werden, daher ist die Vererbung hier sehr wichtig.

Beginnen Sie mit einem einfachen Bedürfnis

Extrahieren Sie nun ein Modell mit dem Namen „Person“ von der Rezeption, das über die Grundattribute „Name“ und „Alter“ verfügt. Standardmäßig kann jeder sprechen, sodass die Sprechfunktion für jede Instanz auf dem Prototypobjekt platziert ist. Nun muss der Mensch die grundlegenden Eigenschaften der Person erben und auf dieser Basis seine eigenen einzigartigen Eigenschaften hinzufügen.

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

Im Folgenden werden mehrere gängige Vererbungsmethoden vorgestellt.

1. Prototypenkettenvererbung

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

Diese Vererbungsmethode ist sehr direkt. Um alle Attributmethoden von Person (Instanz und Prototyp) zu erhalten, wird die Instanz new Person('pursue') der übergeordneten Klasse tatsächlich direkt zugewiesen , die Unterklasse Die Klasseninstanzen man1 und man2 selbst sind völlig leere Objekte. Alle Attribute und Methoden müssen in der Prototypenkette gefunden werden, sodass die gefundenen Attribute und Methoden gleich sind.
Daher ist es unrealistisch, die Vererbung der Prototypenkette direkt zu verwenden.

2. Konstruktorvererbung verwenden

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

Hier verwendet die Unterklasse apply im Konstruktor, um den Konstruktor der übergeordneten Klasse aufzurufen, um den Effekt zu erzielen, dass die Eigenschaften der übergeordneten Klasse geerbt werden. Dies ist viel besser als die direkte Verwendung der Prototypenkette verfügt über eigene Ressourcen, aber diese Methode kann nur die Instanzattribute der übergeordneten Klasse erben, sodass die Say-Methode nicht gefunden werden kann. Um alle Attribute und Methoden der übergeordneten Klasse zu erben, muss die Prototypenkette geändert werden. Damit wird die kombinierte Vererbungsmethode eingeführt.

3. Kombinationsvererbung

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

Es ist zu beachten, dass die Instanzattribute von man1 und man2 tatsächlich die Prototypattribute überschreiben, aber nicht die say-Methode des Prototyps überschreiben (da sie diese nicht haben), also hier man1.say === man2 .say gibt immer noch „true“ zurück. Achten Sie also darauf, die Prototypeigenschaft nicht zu überschreiben, da sie allen Instanzen gemeinsam ist.

4. Parasitäre Kombinationsvererbung

Um ehrlich zu sein, kenne ich den Namen des folgenden Formulars wirklich nicht, aber es ist tatsächlich die beliebteste und klassischste JavaScript-Vererbungsmethode. Tatsächlich müssen Sie nur die Struktur des Prototypobjekts verstehen:

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

Tatsächlich besteht der einzige Unterschied zwischen der parasitären Kombinationsvererbung und der oben genannten Kombinationsvererbung in der Art und Weise, wie das Prototypobjekt der Unterklasse (a. und b.) erstellt wird. Hier wird die Methode Object.creat(obj) verwendet verarbeitet das eingehende Objekt. Das Objekt wird flach kopiert, ähnlich wie:

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

Daher verbindet a. das Prototypobjekt der Unterklasse gut mit dem Prototypobjekt der übergeordneten Klasse, anstatt den Prototyp der Unterklasse wie bei der allgemeinen kombinierten Vererbung direkt zu kopieren (z. B. Man.prototype = new Person() ;), das ist nur ein sehr heftiges Überschreiben von Attributen. Die Methode der parasitären Kombinationsvererbung erbt Instanzattribute und Prototypattribute separat, was in der Implementierung sinnvoller ist.

Hinweis: Code b ändert das Ergebnis von „instanceof“ nicht, ist jedoch strenger für Szenarien, in denen ein Konstruktor erforderlich ist.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme
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
JavaScript und das Web: Kernfunktionalität und AnwendungsfälleJavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Verständnis der JavaScript -Engine: ImplementierungsdetailsVerständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitPython vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenPython gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertVon C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

See all articles

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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)