Heim Web-Frontend Front-End-Fragen und Antworten Wie implementiert man Vererbung in Javascript? Eine kurze Analyse verschiedener Methoden

Wie implementiert man Vererbung in Javascript? Eine kurze Analyse verschiedener Methoden

Apr 24, 2023 am 10:52 AM

Bevor wir über die Vererbung in JavaScript sprechen, müssen wir zunächst verstehen, was eine Klasse ist. In gängigen Programmiersprachen wie Java, C++, C# usw. ist eine Klasse eine Programmstruktur, die zum Kapseln von Daten und Methoden verwendet wird. Objekte können durch Instanziierung erstellt werden, um eine Wiederverwendung und Abstraktion von Code zu erreichen.

Aber in JavaScript unterscheidet sich die Art und Weise, wie Klassen definiert und verwendet werden, geringfügig von anderen Sprachen. JavaScript-Klassen basieren auf Objekten, und Objekte stehen im Mittelpunkt der Sprache. JavaScript verfügt nicht über ein so kompliziertes Klassenvererbungssystem und alle Klassen können vererbt werden, das heißt, mit Ausnahme einiger spezifischer integrierter Objekte wie Mathematik, Datum usw. können die meisten Objekte in JavaScript als Basisklassen dienen .

In JavaScript verfügt die Vererbung über die folgenden Methoden:

  1. Prototyp-Kettenvererbung:

Prototyp-Kettenvererbung ist die grundlegendste Vererbungsmethode in JavaScript. Verwenden Sie Prototypen, um die Funktions- und Eigenschaftsvererbung von übergeordneten Klassen zu implementieren. Einfach ausgedrückt zeigt der Prototyp der Unterklasse auf die Instanz der übergeordneten Klasse und erreicht so eine Vererbung. Auf diese Weise können Sie die übergeordnete Klasse erweitern und neue Attribute und Methoden hinzufügen.

Zum Beispiel:

function Animal() {
  this.species = "动物";
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();  // 将 Cat 的原型对象指向 Animal 的实例

var cat1 = new Cat('小红', '黑色');
console.log(cat1.species);  // 输出 "动物"
Nach dem Login kopieren
  1. Vererbung geliehener Konstruktoren:

Vererbung geliehener Konstruktoren, auch klassische Vererbung oder gestohlene Konstruktorvererbung genannt, bezieht sich auf den Aufruf des Konstruktors der übergeordneten Klasse im Konstruktor der Unterklasse, um eine Vererbung zu erreichen. Diese Methode unterscheidet sich von der Prototypkettenvererbung. Sie kann die Attribute der übergeordneten Klasse erben und Attributunabhängigkeit erreichen.

Zum Beispiel:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

function Cat(name, color) {
  Animal.call(this, name, color);  // 在 Cat 类的构造函数中调用 Animal 类的构造函数
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
Nach dem Login kopieren
  1. Kombinierte Vererbung:

Kombinierte Vererbung bezieht sich auf die Kombination aus Prototypkettenvererbung und geliehener Konstruktorvererbung, sodass Sie gleichzeitig die Eigenschaften und Methoden der übergeordneten Klasse erben können kann die Eigenschaften der übergeordneten Klasse und Methoden verwenden.

Zum Beispiel:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
}

function Cat(name, color) {
  Animal.call(this, name, color);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
Nach dem Login kopieren
  1. Parasitäre Vererbung:

Parasitische Vererbung bezieht sich auf die Erstellung einer Funktion, die lediglich den Vererbungsprozess kapselt, bei dem das Objekt auf irgendeine Weise erweitert wird und schließlich dieses Objekt zurückgibt. Dieses Objekt kann als Prototypobjekt für Unterklassen verwendet werden, um eine Vererbung zu erreichen.

Zum Beispiel:

function Animal(name) {
  var obj = {
    name: name,
    eat: function() {
      console.log('我是一只动物,我可以吃东西!');
    }
  };
  return obj;
}

function Cat(name, color) {
  var animal = Animal.call(this, name);
  animal.color = color;
  return animal;
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
Nach dem Login kopieren
  1. Parasitische Kombinationsvererbung:

Parasitische Kombinationsvererbung bezieht sich auf die Optimierung der Vererbungsleistung von Objekten durch parasitäre Vererbung auf der Grundlage der Kombinationsvererbung. Die Vererbung kann erreicht werden, indem ein neues Objekt erstellt wird, das den Prototyp der übergeordneten Klasse erbt, wodurch die Fallstricke vermieden werden, die mit der Initialisierung des Objekts beim Aufruf des Konstruktors der übergeordneten Klasse verbunden sind.

Zum Beispiel:

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
};

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
Nach dem Login kopieren

Zusammenfassend kann die JavaScript-Vererbung auf verschiedene Arten implementiert werden. In der tatsächlichen Entwicklung müssen Sie die geeignete Methode basierend auf bestimmten Szenarien und Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonWie implementiert man Vererbung in Javascript? Eine kurze Analyse verschiedener Methoden. 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

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 vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

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)

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.

Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store? Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store? Mar 21, 2025 pm 06:23 PM

In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.

Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.

See all articles