Heim > Web-Frontend > js-Tutorial > Eine kurze Untersuchung der JavaScript-Vererbungsmuster_Javascript-Fähigkeiten

Eine kurze Untersuchung der JavaScript-Vererbungsmuster_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:20:24
Original
1086 Leute haben es durchsucht

Im wahrsten Sinne des Wortes ist Javascript keine objektorientierte Sprache und bietet keine traditionelle Vererbungsmethode. Es bietet jedoch eine Prototyp-Vererbungsmethode, die die von ihm selbst bereitgestellten Prototyp-Eigenschaften verwendet, um die Vererbung zu erreichen. Die Vererbung von Javascript-Prototypen ist ein Thema, das als faul gilt, aber ich habe dieses Thema noch nie vollständig verstanden einfache Vererbungsmethode in JS Wenn Sie anderer Meinung sind, geben Sie uns bitte Ihre Vorschläge.

Die grundlegendste Vererbung der Prototypenkette wird hier nicht wiederholt. Ich werde hauptsächlich auf andere Vererbungsmodi eingehen.

1. Konstruktorvererbung ausleihen

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su"); 
Nach dem Login kopieren

Vorteile: Sie können Parameter für Untertypen übergeben, z. B. das Namensattribut in der Abbildung.

Nachteile: 1. Die Methode ist im Konstruktor definiert und kann nicht wiederverwendet werden. 2. Im Supertyp-Prototyp definierte Methoden sind für Subtypen nicht sichtbar.

2. Kombinierte Vererbung (umfassende Prototypenkette und Konstruktor)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // [] 
Nach dem Login kopieren

Vorteile: Verschiedene Unterklassen können ihre eigenen Eigenschaften haben oder dieselben Methoden verwenden.

Nachteile: Diese Methode erfordert den zweimaligen Aufruf des Supertyp-Konstruktors und die gleichnamige Attributmethode wird einmal überschrieben.

3. Prototypische Vererbung (ähnlich wie Object.create())

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj); 
Nach dem Login kopieren

Für die Verwendung dieser Vererbungsmethode ist ein Objekt als Prototypobjekt erforderlich, sodass die Attributmethoden aller Untertypen, die es erben, gemeinsam sind.

ES5 standardisiert die prototypische Vererbung durch die neue Methode Object.creatr().

4. Parasitäre Vererbung (prototypische Vererbung, bei der private Methoden festgelegt werden können)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {  var clone=object(obj);  clone.sayHi=function () {    alert("Hi");  };return clone; }
var me=creObj(obj); 
Nach dem Login kopieren

Vorteile: Diese Methode gleicht die Mängel der prototypischen Vererbung mit nur Methoden mit öffentlichem Eigentum aus und ermöglicht es Untertypen, Methoden mit privatem Eigentum zu haben.

5. Parasitäre kombinierte Vererbung

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;           //将副本作为子类型的原型对象
} 
Nach dem Login kopieren

Diese Methode wird verwendet, um das Problem der Attributmethodenabdeckung bei der kombinierten Vererbung zu beheben.

Verwenden Sie den obigen Code, um den Code Son.prototype=new Father(); in der kombinierten Vererbung zu ersetzen. Auf diese Weise muss der Konstruktor des übergeordneten Typs nur einmal aufgerufen werden, wodurch die Erstellung redundanter und unnötiger Attributmethoden vermieden wird und die Prototypenkette unverändert bleibt. Dies ist eine ideale Vererbungsmethode für Referenztypen.

Ich werde Ihnen eine grobe Einführung in den js-Vererbungsmodus geben. Ich glaube, dass er für Sie hilfreich sein wird. Weitere Informationen finden Sie auf der Website von Script House.

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