Heim > Artikel > Web-Frontend > JS-Vererbungsmethode – Fallbeschreibung
1. Prototypenkette: Verwenden Sie Prototypen, um einem Referenztyp zu ermöglichen, die Eigenschaften und Methoden eines anderen Referenztyps zu erben.
Jeder Konstruktor verfügt über ein Prototypobjekt, und das Prototypobjekt enthält einen Zeiger auf das Konstruktorzeiger und Instanzen enthalten einen internen Zeiger auf das Prototypobjekt.
Grundmuster für die Implementierung der Primitivkette:
function SuperType(){ this.colors =[“red”, “blue”, “green”]; } function SubType(){ } SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push(“black”); alert(instance1.colors); //red, blue, green, black var instance2 = new SubType(); alert(instance2.colors); //red, blue, green, black
Endergebnis: Instance zeigt auf den Prototyp von SubType und der Prototyp von SubType zeigt auf den Prototyp von SuperType
Der Standardprototyp aller Funktionen ist eine Instanz von Object
Problem: Es treten Probleme mit Referenztypwerten auf
Zum Beispiel, wenn es sich um eine Instanz einer Unterklasse handelt Wird erstellt, wenn die Attribute einer Unterklasseninstanz geändert werden, wirkt sich dies auf die Erstellung anderer Unterklassen aus. Der Code lautet wie folgt:
function SuperType(){ this.colors =[“red”, “blue”, “green”]; } function SubType(){ } SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push(“black”); alert(instance1.colors); //red, blue, green, black var instance2 = new SubType(); alert(instance2.colors); //red, blue, green, black
Die obigen Ergebnisse zeigen, dass dies Auswirkungen hat die Attributwerte anderer Instanzen
2. Konstruktor ausleihen: Rufen Sie den Supertyp-Konstruktor innerhalb des Subtyp-Konstruktors auf
function SuperType(){ this.colors =[“red”, “blue”, “green”]; } function SubType{}( SuperType.call(this); //继承了SuperType。通过调用SuperType的构造函数,借用其构造结构 } var instance1 = new SubType(); instance1.colors.push(“black”); alert(intance1.colors); //red,blue,green,black var instance2 = new SubType(); alert(instance2.colors); //red,blue,green
Verwenden Sie diese Methode, um Parameter an den Supertyp-Konstruktor im Unterklassenkonstruktor zu übergeben , wie folgt:
function SuperType(name){ this.name = name; } function SubType(){ SuperType.call(this,“Nicholas”); //传入参数,利用这个参数初始化父类构造函数中的name this.age = 29; } var instance = new SubType(); alert(instance.name); //Nicholas alert(instance.age); //29
Problem: Unbequem zur Wiederverwendung
3. Kombinierte Vererbung: Verwenden Sie die Prototypkette, um die Prototypeigenschaften und -methoden zu erben, und leihen Sie sich den Konstruktor aus Implementieren Sie die Instanz Vererbung von Attributen
Beispielcode:
function SuperType(name){ this.name = name; this.colors = [“red”, “blue”,“green”]; } SuperType.prototype.sayName = function(){ //定义了一个方法,该方法在继承的子类中也可以用 alert(this.name); } function SubType(name, age){ SuperType.call(this, name); //继承SuperType的一部分,this指SubType, this.age = age; //自己新定义的属性age也可以进行赋值 } SubType.prototype = new SuperType(); //利用原型继承,可以使用父类的方法(见原型链继承) SubType.prototype.sayAge = function(){ //定义SubType特有的新方法 alert(this.age); } var instance1 = new SubType(“Martin”, 10); instance1.colors.push(“black”); alert(instance1.colors); //red,blue,green,black instance1.sayName(); //Martin instance1.sayAge(); //10 var instance2 = new SubType(“Greg”, 27); alert(instance2.colors); //red,blue,green instance2.sayName(); //Greg instance2.sayAge(); //27
Verwandte Empfehlungen:
Detaillierte Beispiele für Vererbungsmethoden in JS
Mehrere Möglichkeiten zur Implementierung der Vererbung in JS
Das obige ist der detaillierte Inhalt vonJS-Vererbungsmethode – Fallbeschreibung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!