Explication détaillée des connaissances en héritage dans js

Dans cet article, nous partageons principalement avec vous l'explication détaillée des connaissances en héritage en js, principalement sous forme de texte et de code, en espérant aider tout le monde.

1. Comprendre la relation entre les constructions, les instances et les prototypes. Les prototypes des constructions et des instances pointent vers des prototypes, et le constructeur de prototypes pointe vers des constructeurs

2. sous-classes Il est nécessaire de réutiliser les méthodes et attributs de la classe parent

3. Pointez le prototype construit par la sous-classe vers une instance de la classe parent, et la sous-classe peut accéder au attributs et méthodes de la classe parent à travers cette instance

4. La progression de cette relation couche par couche forme une chaîne de prototypes

• Implémentation

function Super(name) {
    this.name = "name";
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}
Super.prototype.getSuperproperty = function () {
    return this.superproperty;
}

function Sub(name) {
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc

Les deux dernières sorties sont le processus de ctc. Lorsque l'instance rencontre l'opérateur ".", elle sera exécutée 1) Rechercher par exemple, 2) Rechercher sous. .prototype, 3) Recherchez super.prototype.

• Problèmes d'attention

Objet prototype par défaut
Chaque instance a un objet prototype par défaut, donc le super.prototype à l'instant. pointe vers le prototype de l'objet

Devez-vous être prudent lors de la définition de

//继承
Sub.prototype = new Super();

et l'écraser lors de l'héritage ? À qui le constructeur de sub.prototype désigne-t-il actuellement ?

Cette phrase doit être placée,

avant d'ajouter de nouvelles méthodes et de remplacer le code de la méthode

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

• Inconvénients

Les attributs d'instance de la classe parent deviennent les attributs prototypes de la sous-classe et sont partagés en paramètres de passe de classe.

Constructeur d'emprunt

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

}//Inherit Sub.prototype = new Super();Sub.prototype.getSubName = function () { renvoie ce nom. ;}

this.name = name;

Emprunte principalement le code de la structure Super pour implémenter la définition des propres attributs du sous

Mais écrite de cette manière, chaque instance peut avoir ses propres attributs et méthodes. , et en même temps, la réutilisabilité des fonctions de méthode est perdue

L'héritage combiné

est utilisé pour résoudre le problème de la réutilisation des méthodes

Utilisé dans le constructeur du parent class La construction dynamique de prototype ou construction combinée permet au constructeur d'avoir uniquement des définitions d'affectation d'attributs et des définitions de méthodes sur le prototype

Ensuite, dans la sous-classe, pointez le prototype de la sous-classe vers une instance de la classe parent du constructeur. une classe emprunte la structure de la classe parent, de sorte que chaque instance de la sous-classe ait ses propres attributs, mais les méthodes sont partagées.

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

Sub.prototype.getSubName = function () { return this.name;}var instance = new Sub("ctc");

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Héritage prototypique

Une autre implémentation de l'héritage, uniquement à l'aide de prototypes, de nouveaux objets peuvent être créés à partir d'objets existants

Compréhension : F est une fonction et un objet, et son prototype pointe vers l'objet () a accepté o, le F renvoyé est un objet dont le prototype pointe vers o.

function object(o) {
    function F() {
    }
    F.prototype = o;
    return F;
}

Let : Object.creat() standardise la fonction ci-dessus, c'est-à-dire que Object.creat(o) implémente également le code ci-dessus

Héritage parasite

Dans l'héritage prototypique Sur en plus de cela, l'objet a été renforcé et amélioré

Ajout de méthodes d'attribut à l'objet

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

Héritage combiné parasite

Le but est de résoudre le problème d'héritage combiné Le problème est que Super() est appelé au moins deux fois en héritage combiné, 1. Super.call(this,arguments) 2. Sub.prototype = new Super()

En fait, nous je veux juste le prototype de la sous-classe Hériter des méthodes de la classe parent (généralement sur le prototype de la classe parent, car chaque instance n'a pas son propre espace de méthodes)

Nous pouvons donc utiliser l'héritage prototypique pour hériter uniquement du prototype de la sous-classe de la classe parent Le prototype de

remplace le

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

hérité combiné par

Sub.prototype = new Super();

Recommandations associées :

inherit(Sub,Super);

.

en JS Explication détaillée d'exemples de méthodes d'héritage

Quelles sont les méthodes d'héritage en JS ?

Interprétation détaillée du mécanisme d'héritage en js

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!