Maison > interface Web > js tutoriel > Plusieurs méthodes d'implémentation de l'héritage en JavaScript

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

php中世界最好的语言
Libérer: 2020-02-27 14:04:54
avant
2831 Les gens l'ont consulté

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

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'   //父类原型中的属性
Copier après la connexion

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}
Copier après la connexion

À 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
Copier après la connexion

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  通过原型链查找
Copier après la connexion

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
Copier après la connexion

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)
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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'}
Copier après la connexion

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal