Was sind die Vererbungsmethoden in js?

Das offiziell veröffentlichte ES6 hat VererbungForm gekapselt und implementiert, Klasse Erweitert, hier wird hauptsächlich die Prototypenvererbung und -ausleihe von js aufgezeichnetKonstruktorGeerbt

Eins, Prototypkettenvererbung

function Super(){
    this.name="小明";
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance = new Sub();
instance.sayName();//小明1234567891011

Prototyp-Kettenvererbungsproblem

//Wenn die Superklasse Referenztypattributwerte enthält, in mehreren Instanzen einer der Unterklassen, solange ein Instanzreferenzattribut vorhanden ist Nur einmal geändert, ändert sich auch der Referenztypattributwert anderer Instanzen sofort // Der Grund dafür ist, dass das Superklassenattribut zum Prototypattribut der Unterklassenfunktion Super(){this.name=" Xiao Ming"; friends = ['Xiaohong','Xiaoqiang'];
}

Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]1234567891011121314151617

2. Konstruktorvererbung ausleihen

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]12345678910111213141516

Probleme beim Ausleihen Konstruktoren

Die Verwendung des geliehenen Konstruktors allein kann den Prototyp nicht erbenEigenschaften und Methoden in der Superklasse

3. Kombinierte Vererbung (Prototypvererbung + geliehen Konstruktor-Vererbung)

Kombinierte Vererbung ist auch die am häufigsten verwendete Vererbungsmethode in der tatsächlichen Entwicklung

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明12345678910111213141516171819

Probleme mit kombinierter Vererbung

//组合式继承中，超类的构造函数将被调用两次function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);//第二次调用}
Sub.prototype = new Super();//第一次调用var instance = new Sub();1234567891011121314

4. Parasitäre Vererbung

//Wenn das Objekt hauptsächlich berücksichtigt wird, anstatt Typen und Konstruktoren selbst zu definieren, ist parasitäre Vererbung ein nützliches Muster, aber es kann keine Funktion wiederverwenden

createAnother(original){
    var clone = Object(original);//创建一个新对象，original的副本
    clone.sayName = function(){ //对象的增强，添加额外的方法
        alert('hi');
    }    
return
 clone;
}var person = {
    name:'小明',
    friends:['小红','小强']
}var person1 = createAnother(person);var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强", "张三"]123456789101112131415161718

Parasitäre kombinierte Vererbung

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中
创建对象
副本的方法
    prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
    sub.prototype = prototype;
}function Super(name){
    this.name = name;    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name);
}function Sub(name){
    Super.call(this,name);
}
inheritPrototype(Sub,Super);var person1 = new Sub('小明');var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强"]console.log(person1.sayName());//小明console.log(person2.sayName());//小华

Die oben genannten sind einige Vererbungsmethoden in js, die ich für Sie zusammengestellt habe. Ich hoffe, dass sie in Zukunft für alle hilfreich sein werden.

Verwandte Artikel:

Spezifische Schritte zum Übergeben von zwei Parametern an die JS-Methode in JS onclick

JS Basic Syntax Ausführliche Antwort

Erklärung der Methode zum Definieren von Klassen in JS

Das obige ist der detaillierte Inhalt vonWas sind die Vererbungsmethoden in js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!