Teilen mehrerer js-Vererbungsstile

In diesem Artikel werden hauptsächlich verschiedene js-Vererbungsstile vorgestellt, darunter prototypische Vererbung, geliehene Konstruktorvererbung, Kombinationsvererbung, parasitäre Stilvererbung, Parasitäre Kombinationsmethode zur Vererbung, ich hoffe, sie kann jedem helfen.

Prototypische Vererbung

Vererbung kann implementiert werden, ohne dass im Voraus ein Konstruktor definiert werden muss. Sein Wesen besteht darin, eine flache Kopie eines bestimmten Objekts durchzuführen. Die kopierte Kopie kann auch weiter geändert werden

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

Nachteile:
1.
2. Beim Erstellen einer Unterklasseninstanz können Sie keine Parameter an den Konstruktor der übergeordneten Klasse übergeben.

Konstruktorvererbung ausleihen

Leihen Sie sich den Konstruktor der übergeordneten Klasse aus, um die Instanz zu erweitern Unterklasse, das heißt, was dem Kopieren der Attribute oder Methoden der übergeordneten Klasse in die Unterklasse entspricht

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

Vorteile:
1 Lösen Sie das Problem, dass Unterklasseninstanzen Referenzattribute der übergeordneten Klasse teilen
2. Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben.
1. Die Wiederverwendung kann nicht erreicht werden, wenn zu viele Objekte vorhanden sind In der Instanz kommt es zu einem übermäßigen Speicherverbrauch.

Kombinierte Vererbung

Kombinierte Vererbung vermeidet die Nachteile von Prototypketten und geliehenen Konstruktoren und kombiniert deren Vorteile.

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是引用属性，一个改变，互相影响

Vorteile:

Es gibt kein Problem beim Teilen von Referenzattributen
3. Methoden können wiederverwendet werden
Nachteile:
Unterklassen A Redundante Kopie der Attribute der übergeordneten Klasseninstanz auf dem Prototyp

Parasitäre Vererbung

ist der prototypischen Vererbung sehr ähnlich. Sie erstellt auch ein Objekt basierend auf einem Objekt oder einigen Informationen und erweitert es dann das Objekt und gibt schließlich das Objekt zurück.

Parasitäre kombinierte Vererbung

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

Kombinierte Vererbung ist das am häufigsten verwendete Vererbungsmuster in js. Das größte Problem bei kombinierter Vererbung besteht darin, dass der Konstruktor unabhängig von den Umständen zweimal aufgerufen wird : einmal Das andere Mal befindet es sich im Subtyp-Konstruktor beim Erstellen eines Subtyp-Prototyps.

Verwandte Empfehlungen:

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);

Details zur JS-Vererbung

JS-Vererbungsimplementierungscode_Javascript-Fähigkeiten

JS-Vererbung – Prototypkettenvererbung und Klassenvererbung_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonTeilen mehrerer js-Vererbungsstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!