Partager plusieurs styles d'héritage js

Cet article partage principalement avec vous plusieurs styles d'héritage js, dont l'héritage prototypique, l'héritage de constructeur emprunté, l'héritage combiné, l'héritage de style parasite, Héritage de la méthode de combinaison parasite, j'espère que cela pourra aider tout le monde.

Héritage prototypique

L'héritage peut être implémenté sans avoir à définir un constructeur à l'avance. Son essence est d'effectuer une copie superficielle d'un objet donné. La copie copiée peut également être modifiée davantage

function parent(o) {
    this.username = 'father';    this.array = [1,2,3]
}function child() {
    this.age = 20}
child.prototype = new Parent();

Inconvénients :
1. Variables de référence sur la chaîne de prototypes commune des classes et sous-classes parentes.
2. Lors de la création d'une instance de sous-classe, vous ne pouvez pas transmettre de paramètres au constructeur de la classe parent

Emprunter l'héritage du constructeur

Emprunter le constructeur de la classe parent pour améliorer l'instance de la sous-classe, c'est-à-dire, ce qui équivaut à copier les attributs ou les méthodes de la classe parent dans la sous-classe

function Parent(name,arr) {
    this.name = name;    this.arr = arr;    this.run = function() {
        console.log('run function')
   }
}function Child(name, arr) {
    this.age = 20;
    Parent.call(this,name,arr);
}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);
obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

Avantages :
1 Résoudre le problème des instances de sous-classe partageant les attributs de référence de la classe parent<🎜. >2. Créer Lors de la création d'une instance de sous-classe, vous pouvez transmettre des paramètres au constructeur de la classe parent
Inconvénients :
1 La réutilisation ne peut pas être réalisée. Chaque instance de sous-classe a une nouvelle fonction d'exécution. Dans ce cas, une consommation de mémoire surdimensionnée

Héritage combiné

L'héritage combiné évite les défauts des chaînes de prototypes et des constructeurs empruntés et combine leurs avantages.

function Parent(name,arr) {
    this.name = name;    this.arr = arr;
}
Parent.prototype.run = function() {
    console.log('run function');
}function Child(naem,arr) {
    this.age = '20';
    Parent.call(this,name,arr);        // 借用构造函数 ==》 核心语句   1》不能复用}
Child.prototype = new Parent(); // 原型链 ==》 核心语句  1》父构造函数不能传递参数 2》arr是引用属性，一个改变，互相影响

Avantages :

1. Il n'y a aucun problème de partage des attributs de référence
2 Paramètres passables
3 Les méthodes peuvent être réutilisées
Inconvénients :
Sous-classes A. copie redondante des attributs de l'instance de classe parent sur le prototype

L'héritage parasite

est très similaire à l'héritage prototypique Il crée également un objet basé sur un objet ou certaines informations, puis améliore. l'objet, et renvoie enfin l'objet.

function createAnother(original) {
    var clone = Object.create(original); //
    clone.sayHi = function() {
        console.log(Hi) 
   }   return clone;var Person = {
    name: 'Blob',
    friends: ['Shelby', 'Court', 'Van'];
}var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // Hi

Héritage combiné parasite

L'héritage combiné est le modèle d'héritage le plus couramment utilisé en js. Le plus gros problème avec l'héritage combiné est que quelles que soient les circonstances, le constructeur sera appelé deux fois. : once L'autre fois est à l'intérieur du constructeur de sous-type lors de la création d'un prototype de sous-type.

function beget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。
    var F = function(){};
    F.prototype = obj;    return new F();
}function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;    this.arr = [1];
}//  在此处声明函数Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){
    Super.call(this);   // 核心
    // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub;            // 核心Sub.prototype = proto;              // 核心var sub = new Sub();
alert(sub.val);
alert(sub.arr);

Recommandations associées :

Détails de l'héritage js

Compétences code_javascript de mise en œuvre de l'héritage JS

Héritage JS - Héritage de chaîne de prototypes et héritage de classe_Connaissances de base

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!