Exemples détaillés des avantages et des inconvénients des méthodes de prototype, d'application et d'appel en JavaScript

Méthode prototype :

Que signifie l'attribut prototype ? Le prototype est le prototype. Chaque objet (défini par la fonction) possède une propriété de prototype par défaut, qui est un type d'objet.

Et cet attribut par défaut est utilisé pour réaliser la recherche ascendante de la chaîne. Cela signifie que si un attribut d'un objet n'existe pas, l'attribut sera trouvé via l'objet auquel appartient l'attribut prototype. Que faire si le prototype est introuvable ?

js trouvera automatiquement l'objet auquel appartient l'attribut prototype du prototype, de sorte que l'index sera recherché dans le prototype jusqu'à ce que l'attribut soit trouvé ou que le prototype soit finalement vide ("indéfini") ;

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

Cette méthode est la plus simple. Il vous suffit d'attribuer la valeur d'attribut prototype de la sous-classe à une instance héritée, puis vous pouvez directement utiliser les méthodes de. la classe héritée.

Par exemple, dans la méthode one.view() de l'exemple ci-dessus, js vérifiera d'abord s'il existe une méthode view() dans la seule instance. Parce qu'il n'y en a pas, il recherche l'homme. attribut prototype, et la valeur de prototype est person. Une instance,

Cette instance a une méthode view(), donc l'appel est réussi.

Méthode d'application :

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

Remarque : Si le paramètre d'application est vide, c'est-à-dire qu'aucun paramètre n'est transmis, passez new Array(), [] pour passer, null n'est pas valide.

Méthode d'appel :

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

Le mécanisme d'implémentation de la méthode d'appel nécessite un man.prototype = new person() supplémentaire ; Pourquoi?
C'est parce que la méthode d'appel implémente uniquement le remplacement de méthode et ne copie pas les attributs de l'objet.
L'héritage de l'API Google Map utilise cette méthode.

La mise en œuvre des trois méthodes d'héritage est résumée ci-dessus. Mais chaque méthode a ses avantages et ses inconvénients.

Si la classe parent est comme ceci :

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

Comment la sous-classe doit-elle être conçue pour que l'homme de la sous-classe puisse transmettre des paramètres au parent tout en créer l'objet ? La méthode d'héritage de la classe personne et du prototype n'est pas applicable
doit utiliser la méthode apply ou call :

//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']; 
}

Cependant, il en existe encore. inconvénients liés à l’utilisation de la méthode apply Oui, pourquoi ? En js, nous avons un opérateur très important appelé "instanceof", qui est utilisé pour comparer si un objet est d'un certain type.

Pour cet exemple, en plus du type man, la seule instance doit également être du type personne. Cependant, après avoir hérité dans la méthode apply, on n'appartient pas au type personne, cela. c'est-à-dire que la valeur de (une instance de personne) est fausse.

Après tout cela, la meilleure méthode d'héritage est la méthode appel+prototype. Après cela, vous pouvez essayer si la valeur de (une instance de BaseClass) est vraie.

La troisième méthode d'héritage a également des défauts : lors du sous-classement d'un nouvel objet, vous devez transmettre les paramètres requis par la classe parent, et les attributs et méthodes de la classe parent seront reproduits. la méthode d'héritage est parfaite :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!