Heim >Web-Frontend >js-Tutorial >Welche Möglichkeiten gibt es, die Vererbung in Javascript zu implementieren?
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.
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.
// 定义一个动物类 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:
Die übergeordnete Klasse hat einen hinzugefügten Prototyp Methoden/Prototypattribute, auf die Unterklassen zugreifen können
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
Beim Erstellen einer Unterklasseninstanz können Sie Parameter an die übergeordnete Klasse übergeben
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 子类()
还是子类()
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
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: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); // falseUrsachenanalyse:
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 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!