Trois méthodes d'héritage et leurs avantages et inconvénients en js

L'éditeur suivant vous présentera une brève discussion des trois méthodes d'héritage en js et de leurs avantages et inconvénients. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil

La première méthode est le prototype :

//父类 
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 utiliser directement les méthodes de la classe héritée. .

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 recherchera automatiquement l'objet auquel appartient l'attribut prototype du prototype, afin qu'il remonte l' index à travers le prototype jusqu'à ce que l'attribut soit trouvé ou que le prototype soit enfin vide (« undéfini »);

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 une instance. Parce qu'il n'y en a pas , il recherche l'attribut man.prototype et la valeur de prototype. C'est une instance de personne

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

La deuxième façon d'appliquer :

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

La troisième méthode, call+prototype :

//父类 
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 supplémentaire personne(); 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 lors de création de 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']; 
}

Mais il y a toujours des inconvénients à utiliser la méthode apply. En js, nous avons un opérateur très important qui est "instanceof". Cet opérateur 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 présente également des défauts : lors du sous-classement d'un nouvel objet, les paramètres requis par la classe parent doivent être transmis, et les attributs et méthodes dans la classe parent sera reproduite. La méthode d'héritage suivante 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!