Mehrere Implementierungsmethoden der Vererbung in JavaScript

Dieser Artikel stellt Ihnen verschiedene Implementierungsmethoden der Vererbung in JavaScript vor. Ich hoffe, dass Sie nach dem Lesen dieses Artikels ein gewisses Verständnis der Vererbung in JavaScript haben!

Mehrere Implementierungsmethoden der Vererbung in JavaScript

Vererbung

Möchten implementiert werden Bei der Vererbung benötigen Sie zunächst eine übergeordnete Klasse (Konstruktor), um Eigenschaften und Methoden bereitzustellen.

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age='40'   //父类原型中的属性

1. Konstruktorvererbung ausleihen

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son('小明')
console.log(son)   //{name: "小明", age: 10}

Zu diesem Zeitpunkt ruft die Son-Funktion einfach den übergeordneten Konstruktor im untergeordneten Konstruktor über die Aufrufmethode auf

Das heißt, es erbt nur die Eigenschaften des Konstruktors der übergeordneten Klasse, nicht jedoch die Eigenschaften des Prototyps der übergeordneten Klasse.

Sie können zu diesem Zeitpunkt die Methode „instanceof“ verwenden, um zu beurteilen

console.log(son instanceof Father) //false

2. Über die Prototypenkette erben

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son('小明')
console.log(xiaoming)    //{sonName:'小明'}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

Son erbt das Namensattribut in der Vater-Konstruktor Neben dem Altersattribut im Prototyp erbt das Prototypobjekt des Sohns Xiao Ming das sonName-Attribut im Son-Konstruktor, das Namensattribut im Vater-Konstruktor und das Altersattribut im Prototyp , kann aber nur Werte an den Sohn übergeben, der Wert kann nicht an den Vater übergeben werden.

3. Kombinierte Vererbung (kombinierte Prototypkettenvererbung und geliehene Konstruktorvererbung)

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son('小明')
console.log(son)  //{name:'小明'}
console.log(son.age) //40

4. Vererbung kopieren

Durch for...in zyklisch die aufzählbaren Eigenschaften und Methoden des übergeordneten Klassenobjekts und des Prototypobjekts dem Prototyp des Sohns zuweisen

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son('leo')
console.log(son)

5. Prototypische Vererbung

Für die Verwendung der prototypischen Vererbung ist es nicht erforderlich, eine Klasse zu definieren, den Parameter obj zu übergeben und ein Objekt zu generieren, das das obj-Objekt erbt. Ähnlich dem Kopieren eines Objekts und dem Umschließen mit einer Funktion. Es handelt sich jedoch nicht um eine Klassenvererbung, sondern um eine Prototypenbasis, der das Konzept der Klasse fehlt.

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father('son');
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true

6. Parasitäre Vererbung

Erstellen Sie eine Funktion, um den Vererbungsprozess zu kapseln, erweitern Sie dann das Objekt auf irgendeine Weise intern und geben Sie das Objekt schließlich zurück

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name='son'
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son

7. Parasitäre kombinierte Vererbung

Durch die Kombination von parasitärer Vererbung und kombinierter Vererbung ist die Vererbungsmethode ohne zwei Oberklassenattribute perfekt realisiert, aber sie fühlt sich zu kompliziert an Nachlass.

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son('son');
console.log(son)   //{name:'son'}

JS-Tutorial

Das obige ist der detaillierte Inhalt vonMehrere Implementierungsmethoden der Vererbung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!