Detaillierte Beispiele für die Vor- und Nachteile von Prototyp-, Apply- und Call-Methoden in JavaScript

Prototyp-Methode:

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, das zum Prototypattribut des Prototyps gehört, sodass der Index im Prototyp durchsucht wird, bis das Attribut gefunden wird oder der Prototyp schließlich leer ist („undefiniert“);

//父类 
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 von direkt verwenden die geerbte Klasse.

Zum Beispiel prüft js in der one.view()-Methode im obigen Beispiel zunächst, ob es in der einen Instanz eine view()-Methode gibt. Da dies nicht der Fall ist, sucht es nach dem Mann. Prototyp-Attribut und der Wert von Prototyp ist Person.

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

Apply-Methode:

//父类 
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.

Aufrufmethode:

//父类 
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.

Die Implementierung der drei Vererbungsmethoden ist oben zusammengefasst. 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 gestaltet sein, damit der Unterklasse-Mann Parameter an die übergeordnete Klasse übergeben kann? Erstellen des Objekts? Die Vererbungsmethode der Klasse Person und Prototyp ist nicht anwendbar.
muss die Methode apply oder call 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']; 
}

Es gibt jedoch immer noch Nachteile bei der Verwendung der Apply-Methode. Ja, warum? In js haben wir einen sehr wichtigen Operator namens „instanceof“, der verwendet wird, 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: Beim Unterklassifizieren eines neuen Objekts müssen die von der übergeordneten Klasse benötigten Parameter übergeben werden, und die Attribute und Methoden in der übergeordneten Klasse werden wie folgt reproduziert Die 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 vonDetaillierte Beispiele für die Vor- und Nachteile von Prototyp-, Apply- und Call-Methoden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!