Comment implémenter l'héritage composable parasite à l'aide de JavaScript

Cet article présente principalement l'héritage combiné parasite JavaScript et analyse en détail les principes, les méthodes de mise en œuvre et les précautions associées de l'héritage combiné parasite sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

Les exemples dans. cet article décrit l'héritage composable parasite JavaScript. Je le partage avec vous pour votre référence. Les détails sont les suivants :

En fait, le livre "JavaScript Advanced Programming" contient déjà le code complet Tant que vous comprenez le code, vous saurez ce que c'est. l'héritage est une question.

Tout d'abord, en js, il existe deux manières de définir des attributs pour les objets :

//通过执行构造函数设置属性
function A(){
  this.a = 1;
}
//通过原型设置属性
A.prototype.b = 1;

Donc :

Si une classe Sub veut hériter d'une autre classe Super , il doit hériter. Pour les attributs sous le prototype de la classe parent, le constructeur de la classe parent doit également être exécuté.

C'est-à-dire Pour qu'une classe Sub hérite d'une autre classe Super, elle doit non seulement hériter des propriétés et des méthodes du prototype via la chaîne de prototypes, mais également réaliser l'héritage en appelant le constructeur de la classe parent dans le constructeur de sous-classe. Héritage des propriétés de l'instance.

1. Hériter des attributs sous le prototype

Comme vous pouvez le voir ci-dessus, les attributs sous le prototype de la classe Super ne sont pas hérités, cette partie doit donc être hérité ci-dessous.

Direct "=" ne fonctionnera certainement pas, car après avoir modifié les propriétés dans Sub.prototype, il ne peut pas affecter les objets dans Super.prototype, c'est-à-dire qu'il ne peut pas Sub.prototype=Super.prototype.

Écrivez d'abord une méthode pour créer une copie de l'objet

function object(o){
  function A(){}
  A.prototype = o
  var ox = new A()
  return ox
}

L'objet ox obtenu par la fonction ci-dessus a tous les attributs de l'objet o (sur la chaîne prototype), et le les attributs de ox sont modifiés, n'affecteront pas o, cela équivaut à faire une copie de o.

L'héritage prototypique est la fonction "objet" ci-dessus, que l'on peut trouver dans de nombreux codes sources de bibliothèques de classes.

En termes simples, l'héritage prototypique signifie qu'il n'est pas nécessaire d'instancier directement la classe parent. l'instanciation d'une copie temporaire implémente le même héritage de chaîne de prototypes. (C'est-à-dire que le prototype de la sous-classe pointe vers l'instance de la copie de la classe parent pour réaliser le partage du prototype)

conseils :Comme nous le savons tous, l'héritage de la chaîne de prototypes est obtenu par pointer le prototype de la sous-classe vers l'instance de la classe parent. Le partage de prototype, et l'héritage prototypique signifie que le prototype de la sous-classe pointe vers une instance de la copie de la classe parent pour réaliser le partage de prototype .

ECMAScirpt 5 standardise l'héritage prototypique grâce à la nouvelle méthode Object.create().

En utilisant la méthode objet, vous pouvez "copier" les propriétés de Super.prototype vers Sub.prototype. Bien sûr, vous devez également corriger le pointage du constructeur ici.

function inherit(subType,superType){
 var prototype=Object.create(superType.prototype);
 prototype.constructor=subType;
 subType.prototype=prototype;
}

2. Exécutez respectivement les constructeurs de la classe parent et de la sous-classe, et héritez des attributs sous cette partie :

//父类
function Super(){
this.sss=1
}
//子类
function Sub(){
//arguments是Sub收到的参数，将这个参数传给Super
Super.apply(this, arguments)
}
//实例
sub = new Sub()

Super.apply(this, arguments)This phrase, La classe Super est exécutée comme une fonction ordinaire, mais le this de la classe Super est remplacé par celui de la classe Sub, et les paramètres reçus par Sub sont également transmis à Super

Le résultat final de l'exécution. est équivalent à sub.sss=1

Vous trouverez ci-joint les caractéristiques, avantages et inconvénients des diverses méthodes d'héritage

Il fut un temps où JavaScript n'était pas standardisé concernant l'implémentation des classes l'héritage, entraînant diverses implémentations de code ; en fait, quelle que soit la façon dont le code change, l'héritage est basé sur deux méthodes :

1 via la chaîne de prototypes , c'est-à-dire. le prototype de la sous-classe pointe vers l'instance de la classe parent pour réaliser le partage de prototype.
2. Emprunter le constructeur , c'est-à-dire que grâce à l'application et à l'appel de js, la sous-classe peut appeler les attributs et les méthodes de la classe parent

La méthode de chaîne prototype ; peut implémenter toutes les méthodes d'attribut Shared, mais les attributs et les méthodes ne peuvent pas être exclusifs (par exemple, Sub1 modifie la fonction de la classe parent, et toutes les autres sous-classes Sub2, Sub3... ne peuvent pas appeler l'ancienne fonction

) ;

Et constructeur emprunté peut non seulement avoir des propriétés et des méthodes exclusives, mais peut également transmettre des paramètres dans le constructeur de sous-classe, mais le code ne peut pas être réutilisé. D'une manière générale, peut obtenir une utilisation exclusive de toutes les méthodes d'attribut, mais ne peut pas partager d'attributs et de méthodes (par exemple, si Sub1 ajoute une nouvelle fonction, puis souhaite l'utiliser dans Sub2, Sub3... Il ne peut pas être réalisé, seuls Sub2, Sub3... peuvent être ajoutés respectivement dans le constructeur).

L'héritage combiné consiste à utiliser ensemble les deux méthodes d'héritage ci-dessus. Les propriétés et méthodes partagées sont implémentées à l'aide de l'héritage de chaîne de prototypes, et les propriétés et méthodes exclusives sont implémentées à l'aide de constructeurs empruntés. Par conséquent, l'héritage combiné est une implémentation presque parfaite de. js. héritage ; pourquoi est-il dit « presque » ? Parce que les geeks sérieux ont découvert qu'il y avait un petit bug dans l'héritage combinatoire. Lors de son implémentation, la super classe (classe parent) a été appelée deux fois. Est-il possible que les performances ne soient pas aux normes ? Comment le résoudre ? C'est ainsi qu'est apparu « l'héritage parasitaire ».

L'héritage parasite (héritage prototypique) signifie qu'il n'est pas nécessaire d'instancier la classe parent. L'instanciation directe d'une copie temporaire implémente le même héritage de chaîne prototype. (C'est-à-dire que le prototype de la sous-classe pointe vers l'instance de la copie de la classe parent pour réaliser le partage du prototype)

"Héritage de combinaison parasite" utilise "l'héritage parasite" pour corriger le petit bug de "héritage combiné", ce qui rend l'implémentation parfaite de js héritée.

Exemple de code :

function SuperType(name,colors){
  this.name=name;
  this.colors=colors;
}
SuperType.prototype.getSuperProperty=function(){ return this.name; }
function SubType(job,name,colors){
  SuperType.call(this,name,colors);
  this.job=job;
}
SubType.prototype.getSubPrototype=function(){ return this.job; }
function inherit(subType,superType){
  var prototype=Object.create(superType.prototype);
  prototype.constructor=subType;
  subType.prototype=prototype;
}
inherit(SubType,SuperType);
var instance=new SubType("doctor","John",["red","green"]);
console.log(instance.getSubPrototype());  //输出"doctor"
console.log(instance.getSuperProperty());  //输出"John"，成功调用在父类原型定义的方法

Le code d'héritage de l'attribut estSuperType.call(this,name,colors);

Le code d'héritage du prototype estinherit(SubType,SuperType);

Ce qui précède est ce que J'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la détection de collision en JS

Comment l'utiliser avec gulp et bower en angulaire1 ?

Quelles sont les méthodes de débogage des scripts js ?

Comment implémenter un champ de recherche à l'aide d'Angular

Introduction détaillée à l'interpolation dans vue

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!