Drei Vererbungsmethoden und ihre Vor- und Nachteile in js

Der folgende Editor bietet Ihnen eine kurze Diskussion der drei Vererbungsmethoden in js und ihrer Vor- und Nachteile. Der Herausgeber findet es ziemlich gut, also teile ich es jetzt mit Ihnen und gebe es als Referenz. Lassen Sie uns dem Herausgeber folgen und einen Blick darauf werfen

Der erste Weg ist der Prototyp.

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

Diese Methode ist die einfachste. Sie müssen nur den Prototypattributwert der Unterklasse einer geerbten Instanz zuweisen und können dann die Methoden der geerbten Klasse direkt verwenden .

Was bedeutet das Prototyp-Attribut? Prototyp ist der Prototyp. Jedes Objekt (definiert durch die Funktion) verfügt über eine Standard-Prototyp-Eigenschaft, die einen Objekttyp darstellt.

Und dieses Standardattribut wird verwendet, um die Aufwärtssuche der Kette zu realisieren. Das heißt, wenn ein Attribut eines Objekts nicht existiert, wird das Attribut über das Objekt gefunden, zu dem das Prototypattribut gehört. Was passiert, wenn der Prototyp nicht gefunden werden kann?

js sucht automatisch nach dem Objekt, zu dem das Prototypattribut des Prototyps gehört, sodass es im Index durch den Prototyp geht, bis das Attribut gefunden wird oder der Prototyp endgültig ist leer („undefiniert“);

Zum Beispiel prüft js in der one.view()-Methode im obigen Beispiel zunächst, ob in der einen Instanz eine view()-Methode vorhanden ist. Weil dies nicht der Fall ist , es sucht nach dem Attribut man.prototype und dem Wert prototyp Es handelt sich um eine Instanz von person

Die Instanz verfügt über eine view()-Methode, sodass der Aufruf erfolgreich ist.

Die zweite Art der Anwendung:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.apply(this,[]); 
  this.feature = ['beard','strong']; 
} 

var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

Hinweis: Wenn der Apply-Parameter leer ist, d. h. es wird kein Parameter übergeben, Übergeben Sie new Array (), [] zum Übergeben, null ist ungültig.

Die dritte Methode, Aufruf + Prototyp:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.call(this,[]); 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

Der Implementierungsmechanismus der Aufrufmethode erfordert einen weiteren man.prototype = new person(); Warum?
Das liegt daran, dass die Aufrufmethode nur die Methodenersetzung implementiert und keine Objektattribute kopiert.
Die Vererbung der Google Map API verwendet diese Methode.

Das Obige fasst die Implementierung der drei Vererbungsmethoden zusammen. Aber jede Methode hat ihre Vor- und Nachteile.

Wenn die übergeordnete Klasse so aussieht:

//父类 
function person(hair,eye,skin){ 
  this.hair = hair; 
  this.eye = eye; 
  this.skin = skin; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
}

Wie sollte die Unterklasse entworfen werden, damit der Unterklassen-Man beim Erstellen des Objekts Parameter an die übergeordnete Klasse übergeben kann? Die Vererbungsmethode von Klassenperson und Prototyp ist nicht anwendbar. Muss die Apply- oder Call-Methode verwenden:

//apply方式 
//子类 
function man(hair,eye,skin){ 
  person.apply(this,[hair,eye,skin]); 
  this.feature = ['beard','strong']; 
} 
//call方式 
//子类 
function man(hair,eye,skin){ 
  person.call(this,hair,eye,skin); 
  this.feature = ['beard','strong']; 
}

Aber es gibt immer noch Nachteile bei der Verwendung der Apply-Methode. In js haben wir einen sehr wichtigen

-Operator , nämlich „instanceof“. Dieser Operator wird verwendet, um zu vergleichen, ob ein Objekt von einem bestimmten Typ ist.

Für dieses Beispiel sollte die eine Instanz zusätzlich zum Typ „person“ auch der Typ „person“ sein. Nach der Vererbung in der Methode „apply“ gehört man jedoch nicht zum Typ „person“. , der Wert von (einer Instanz von Person) ist falsch.

Nach all dem ist die beste Vererbungsmethode die Call+Prototype-Methode. Danach können Sie versuchen, ob der Wert von (einer Instanz von BaseClass) wahr ist.

Die dritte Vererbungsmethode weist ebenfalls Mängel auf: Bei der Unterklassifizierung eines neuen Objekts müssen die von der übergeordneten Klasse benötigten Parameter sowie die

Attribute und Methoden in der übergeordneten Klasse übergeben werden wird reproduziert. Die folgende Vererbungsmethode ist perfekt:

function Person(name){   
  this.name = name; 
} 

Person.prototype.getName = function() { 
  return this.name; 
} 

function Chinese(name, nation) { 
  Person.call(this, name); 
  this.nation = nation; 
} 

//继承方法 
function inherit(subClass, superClass) { 
  function F() {} 
  F.prototype = superClass.prototype; 
  subClass.prototype = new F(); 
  subClass.prototype.constructor = subClass.constructor; 
} 

inherit(Chinese, Person); 

Chinese.prototype.getNation = function() { 
  return this.nation; 
}; 

var p = new Person('shijun'); 
var c = new Chinese("liyatang", "China"); 

console.log(p); // Person {name: "shijun", getName: function} 
console.log(c); // Chinese {name: "liyatang", nation: "China", constructor: function, getNation: function, getName: function} 


console.log(p.constructor); // function Person(name){} 
console.log(c.constructor); // function Chinese(){} 

console.log(c instanceof Chinese); // true 
console.log(c instanceof Person); // true

Das obige ist der detaillierte Inhalt vonDrei Vererbungsmethoden und ihre Vor- und Nachteile in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!