Heim > Web-Frontend > js-Tutorial > JS-Vererbungsmethode – Fallbeschreibung

JS-Vererbungsmethode – Fallbeschreibung

php是最好的语言
Freigeben: 2018-08-08 09:19:03
Original
1620 Leute haben es durchsucht

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
Nach dem Login kopieren
Nach dem Login kopieren

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
Nach dem Login kopieren
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
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