Plusieurs méthodes d'implémentation de l'héritage en JavaScript

Cet article vous présentera plusieurs méthodes d'implémentation de l'héritage en JavaScript. J'espère qu'après avoir lu cet article, vous aurez une certaine compréhension de l'héritage en JavaScript !

Plusieurs méthodes d'implémentation de l'héritage en JavaScript

Héritage

Voulez-vous implémenter héritage, vous devez d'abord avoir une classe parent (constructeur) pour fournir des propriétés et des méthodes.

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

1. Emprunter l'héritage du constructeur

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

À ce stade, la fonction Son appelle simplement le constructeur parent dans le constructeur enfant via la méthode d'appel

C'est-à-dire qu'il hérite uniquement des attributs du constructeur de la classe parent et n'hérite pas des attributs du prototype de la classe parent.

Vous pouvez utiliser la méthode instanceof pour juger à ce moment

console.log(son instanceof Father) //false

2 Hériter via la chaîne de prototypes

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 hérite. le constructeur Père L'attribut name et l'attribut age dans le prototype,

L'objet prototype de Son Xiao Ming hérite de l'attribut sonName dans le constructeur Son, de l'attribut name dans le constructeur Father et de l'attribut age dans le prototype, mais la valeur ne peut être transmise qu'au Fils, mais pas au Père.

3. Héritage combiné (héritage combiné de chaîne de prototype et héritage de constructeur emprunté)

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

Combiné les deux méthodes d'héritage 1 et 2 pour résoudre le problème de l'incapacité pour hériter du prototype Attributs, méthodes et problème de l'impossibilité de transmettre des paramètres. En fait, la sous-classe aura deux attributs de la classe parent, mais les attributs de la sous-classe couvrent les attributs de la classe parent (Father.call(), new Father())

4. Copier l'héritage

Par for...in, attribuer cycliquement les propriétés et méthodes énumérables de l'objet de classe parent et de l'objet prototype au prototype de Son

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)

Cette méthode ne peut pas être obtenue Les méthodes non énumérables de la classe parent nécessitent également de copier les propriétés et les méthodes de la classe parent, elles occupent donc beaucoup de mémoire et sont moins efficaces.

5. Héritage prototypique

L'utilisation de l'héritage prototypique ne nécessite pas de définir une classe, de passer le paramètre obj et de générer un objet qui hérite de l'objet obj. Semblable à copier un objet et à l’envelopper avec une fonction. Mais il ne s’agit pas d’un héritage de classe, mais d’une base de prototype dépourvue du concept de classe.

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. Héritage parasite

Créez une fonction juste pour encapsuler le processus d'héritage, puis améliorez l'objet d'une manière ou d'une autre en interne, et enfin renvoyez l'objet

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. Héritage combiné parasite

Combinant l'héritage parasite et l'héritage combiné, la méthode d'héritage sans deux attributs de superclasse est parfaitement réalisée, mais c'est trop compliqué, et ça on a l'impression que ce n'est pas aussi bon qu'un héritage combiné.

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'}

Cet article provient de la rubrique tutoriel js, bienvenue pour apprendre !

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!