Heim  >  Artikel  >  Web-Frontend  >  Welche Möglichkeiten gibt es, die Vererbung in Javascript zu implementieren?

Welche Möglichkeiten gibt es, die Vererbung in Javascript zu implementieren?

青灯夜游
青灯夜游Original
2021-06-22 16:21:109523Durchsuche

Wie JavaScript die Vererbung implementiert: 1. Prototypkettenvererbung: Verwenden Sie die Instanz der übergeordneten Klasse als Prototyp der Unterklasse. 2. Strukturelle Vererbung: Verwenden Sie den Konstruktor der übergeordneten Klasse, um die Instanz der Unterklasse zu erweitern. 3. Instanzvererbung: Fügen Sie den übergeordneten Klasseninstanzen neue Funktionen hinzu und geben Sie sie als Unterklasseninstanzen zurück. 4. Vererbung kopieren. 5. Kombinationsvererbung. 6. Parasitäre Kombinationsvererbung.

Welche Möglichkeiten gibt es, die Vererbung in Javascript zu implementieren?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

JS ist eine objektorientierte, schwach typisierte Sprache, und Vererbung ist ebenfalls eine ihrer sehr leistungsstarken Funktionen. Wie implementiert man also die Vererbung in JS? Warten wir ab.

So implementieren Sie die JS-Vererbung. Da wir die Vererbung implementieren möchten, müssen wir zunächst eine übergeordnete Klasse haben die übergeordnete Klasse als Unterklasse Der Prototyp von

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

Eigenschaften:

Eine sehr reine Vererbungsbeziehung Die Instanz ist eine Instanz der Unterklasse und auch eine Instanz der übergeordneten Klasse

Die übergeordnete Klasse hat einen hinzugefügten Prototyp Methoden/Prototypattribute, auf die Unterklassen zugreifen können

    Einfach und leicht zu implementieren
  • Nachteile:
  • Um Attribute und Methoden zur Unterklasse hinzuzufügen, können Sie Instanzattribute zur Cat-Instanz in hinzufügen Katzenkonstrukteur. Wenn Sie Prototypeigenschaften und -methoden hinzufügen möchten, müssen diese nach Anweisungen wie new Animal() ausgeführt werden.
  • Mehrfachvererbung kann nicht implementiert werden

    Alle Eigenschaften des Prototypobjekts werden von allen Instanzen gemeinsam genutzt
  • Beim Erstellen einer Unterklasseninstanz können Parameter nicht an den Konstruktor der übergeordneten Klasse übergeben werden
  • 2. Konstruktive Vererbung

  • Kern:

    Verwenden Sie den Konstruktor der übergeordneten Klasse, um die Instanz der Unterklasse zu verbessern. Dies entspricht dem Kopieren der Instanzattribute der übergeordneten Klasse in die Unterklasse (es wird kein Prototyp verwendet)

    function Cat(){ 
    }
    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';
    
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.eat('fish'));
    console.log(cat.sleep());
    console.log(cat instanceof Animal); //true 
    console.log(cat instanceof Cat); //true
  • Eigenschaften:

Gelöst 1, Unterklasse Das Problem, dass Klasseninstanzen Referenzattribute der übergeordneten Klasse gemeinsam nutzen

Beim Erstellen einer Unterklasseninstanz können Sie Parameter an die übergeordnete Klasse übergeben

    Sie können eine Mehrfachvererbung erreichen (mehrere übergeordnete Klassen aufrufen). Objekte)
  • Nachteile:
  • Instanzen sind keine Instanzen der übergeordneten Klasse, sondern nur Instanzen der Unterklasse.
  • können nur die Instanzattribute und -methoden der übergeordneten Klasse erben, jedoch keine Prototypattribute /Methoden.

    Funktionswiederverwendung kann nicht erreicht werden, jede Unterklasse verfügt über eine Kopie der Instanzfunktion der übergeordneten Klasse
  • 3. Instanzvererbung
  • Kern:
  • Fügen Sie der übergeordneten Klasseninstanz neue Funktionen hinzu Geben Sie es als Instanz einer untergeordneten Klasse zurück Klasse, keine Instanzen der Unterklasse.
  • Unterstützt keine Mehrfachvererbung

Geringe Effizienz, hoch Speichernutzung (da die Attribute der übergeordneten Klasse kopiert werden müssen)

Nicht aufzählbare Methoden der übergeordneten Klasse können nicht abgerufen werden (nicht aufzählbare Methoden, auf die mit for in nicht zugegriffen werden kann)

  • 5. Kombinationsvererbungnew 子类()还是子类()

Kern:

Erben Sie durch Aufrufen des Konstruktors der übergeordneten Klasse die Eigenschaften der übergeordneten Klasse, behalten Sie die Vorteile der Übergabe von Parametern bei und übergeben Sie dann die Instanz der übergeordneten Klasse, die als Prototyp der Unterklasse verwendet wird, um die Funktion zu realisieren Wiederverwendung

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
    Eigenschaften:
  • gleicht die Mängel von Methode 2 aus. Sie kann Instanzattribute/-methoden und Prototypattribute/-methoden erben
  • Es handelt sich sowohl um eine Unterklasse als auch um eine Instanz der übergeordneten Klasse

Es gibt kein Problem beim Teilen von Referenzattributen

  • Parameter können übergeben werden

Funktionen können wiederverwendet werden

  • Nachteile:

  • Der übergeordnete Klassenkonstruktor wird zweimal aufgerufen, es wurden zwei Instanzen generiert ( Die Unterklasseninstanz schirmt die des Unterklassenprototyps ab Zweimal aufgerufen, werden die Instanzmethoden/Eigenschaften nicht zweimal initialisiert, wodurch die Mängel der kombinierten Vererbung vermieden werden.

    Anhangcode:

Beispiel 1:
function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
Ursachenanalyse:

Wichtiger Punkt: AttributsuchprozessFühren Sie tom.features.push aus, suchen Sie zuerst das Instanzattribut des Tom-Objekts (kann es nicht finden),

Dann suchen Sie im Prototypobjekt danach, das eine Instanz von Animal ist. Wenn Sie feststellen, dass dies der Fall ist, fügen Sie den Wert direkt in das Attribut „features“ dieses Objekts ein.

    Wenn console.log(kissy.features); Dasselbe wie oben: Wenn es auf der Kissy-Instanz nicht verfügbar ist, suchen Sie es auf dem Prototyp.
  • Wenn es sich zufällig auf dem Prototyp befindet, wird es direkt zurückgegeben. Beachten Sie jedoch, dass sich die Werte des Features-Attributs in diesem Prototypobjekt geändert haben.

    【Verwandte Empfehlungen: Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, die Vererbung in Javascript zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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