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

PHPz
Freigeben: 2023-04-24 11:40:44
Original
765 Leute haben es durchsucht

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!

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