Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man Vererbung in Javascript? Fassen Sie verschiedene Möglichkeiten zur Implementierung der Vererbung in js zusammen

Wie implementiert man Vererbung in Javascript? Fassen Sie verschiedene Möglichkeiten zur Implementierung der Vererbung in js zusammen

零下一度
零下一度Original
2017-05-08 10:28:201723Durchsuche

Rückblickend auf das zuvor erlernte Wissen lässt es sich grob in zwei Kategorien einteilen:

 1. Muster basierend auf Konstrukteursarbeit.

 2. Arbeitsmodus basierend auf Objekt .

 3. Ob der Prototyp verwendet werden soll

 4. Ob das Attribut kopiert werden soll.

5. Beides (Prototypattributkopie ausführen)

Lassen Sie uns alle bisherigen Kenntnisse überprüfen:

1. Prototype-Chain-Methode (Nachahmung der Tradition) :

child.prototype = new Parent();

Muster: Basierend auf Konstruktor, unter Verwendung des Prototypkettenmusters.

Technischer Hinweis: Der Standardmechanismus Vererbung ermöglicht es uns, die wiederverwendbaren Teile der Methoden und Eigenschaften in die Prototypenkette zu migrieren und die nicht wiederverwendbaren Eigenschaften und Methoden auf unsere eigene Eigenschaft festzulegen.

2. Nur Vererbung vom Prototyp:

Child.prototype = Parent.prototype

Modus: konstruktorbasierter Arbeitsmodus, Prototyp-Kopiermodus (keine Prototypkette, alle Objekte teilen sich einen Prototyp) .

Technischer Hinweis: Da dieser Modus keine neuen Objektinstanzen zum Aufbau von Vererbungsbeziehungen erfordert, bietet er eine bessere Leistung im Hinblick auf die Effizienz.

Die Abfrage auf der Prototypenkette ist auch schneller, da es überhaupt keine Kette gibt.

Der Nachteil besteht darin, dass Änderungen am untergeordneten Objekt Auswirkungen auf das übergeordnete Objekt haben, da das untergeordnete Objekt nur eine Referenz des übergeordneten Objekts ist.

3. Temporäre Konstruktormethode:

function extend(Child, parent){    var F = fucntion(){};
    F.prototype = Parent.prtotype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;  
}

Modus: Konstruktorbasierter Arbeitsmodus unter Verwendung des Prototypenkettenmodus.

Technischer Hinweis: Dieser Modus unterscheidet sich von Modus 1. Er erbt nur die Prototypeigenschaften des übergeordneten Objekts, nicht jedoch die eigenen Eigenschaften des übergeordneten Objekts (d. h. die Eigenschaften, die diesem zum übergeordneten Konstruktor hinzugefügt wurden). ).

Darüber hinaus bietet dieser Modus auch eine Möglichkeit, auf das übergeordnete Objekt zuzugreifen. (d. h. über das Attribut usber).

4. Methode zum Kopieren von Prototypattributen:

function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){
        c[i] = p[i];
    }
    c.uber = p;
}

Offizieller Modus: Basierend auf dem Konstruktor-Arbeitsmodus und dem Attributkopiermodus, verwenden Sie den Prototypmodus .

Technischer Hinweis: Konvertieren Sie alle Inhalte im Prototyp des übergeordneten Objekts in die Prototypeigenschaften des untergeordneten Objekts.

  Es besteht keine Notwendigkeit, separate Objektinstanzen für die Vererbung zu erstellen.

Auch die Prototypenkette selbst ist kürzer.

5. Methode zum vollständigen Kopieren von Attributen:

function extendCopy(p){    var c = {};    for(var i in p){
        c[i] = p[i];
    }
    c.uber  = p;    return c;
}

Offizieller Modus: objektbasierter Arbeitsmodus, Attributkopiermodus.

Technischer Hinweis: Sehr einfach, es werden keine Prototypattribute verwendet.

6. Deep-Copy-Methode:

function deepCopy(Parent, Child){
    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){
                 Child[i] = Array.isArray(p[i]) ? [] : {};
                 deepcopy(Parent[i], Child[i]);  
             }else{
                 Child[i] = Parent[i]
             }
        }
    }    return Child;
}

Offizieller Modus: objektbasierter Arbeitsmodus, Attributkopiermodus.

Technischer Hinweis: Wie 5, aber alle Objekte werden als Wert übergeben.

7. Prototypische Vererbungsmethode:

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

Offizieller Modus: Basierend auf dem Objektarbeitsmodus, basierend auf dem Prototypkettenmodus.

Technischer Hinweis: Geben Sie den Klassenimitationsmechanismus auf und bauen Sie direkt Vererbungsbeziehungen zwischen Objekten auf.

Nutzen Sie die inhärenten Vorteile von Prototypen.

8. Erweiterungs- und Verbesserungsmodus:

function objectPlus(o, stuff){    var n;    function(){};
    F.prototype = o;
    n = new F();
    n.uber = o;    for(var i in stuff){
        n[i] = stuff[i]
    }    return n;
}

Modus: Objektbasierter Arbeitsmodus, Verwendung des Prototypkettenmodus, Attributkopiermodus.

Technischer Hinweis: Diese Methode ist eigentlich eine gemischte Anwendung aus Prototypenvererbung und Prototypenkopie. Sie vervollständigt die Vererbung und Erweiterung des Objekts gleichzeitig durch eine Funktion.

9. Mehrfachvererbungsmethode:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}

Offizieller Modus: objektbasierter Arbeitsmodus, Attributkopiermodus.

Technischer Hinweis: Eine Hybrid-Plug-in-Vererbungsimplementierung.

  Sie kopiert alle Attribute der übergeordneten Objekte der Reihe nach entsprechend ihrer Vererbungsreihenfolge.

10. Parasitäre Vererbungsmethode:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}

Offizieller Modus: Basierend auf dem Objektarbeitsmodus unter Verwendung des Prototypkettenmodus.

Technischer Hinweis: Diese Methode erstellt ein Objekt über eine konstruktorähnliche Funktion.

Diese Funktion erstellt eine Kopie des entsprechenden Objekts, erweitert es und gibt dann die Kopie zurück.

11. Konstruktor-Ausleihmethode:

function Child{
    Parent.apply(this, arguments);
}

Zugehörigkeitsmodus: Konstruktorbasierter Arbeitsmodus.

Technischer Hinweis: Diese Methode kann nur die eigenen Eigenschaften des übergeordneten Objekts erben (d. h. this.properties und Methoden im Konstruktor).

Kann mit Methode eins kombiniert werden.

       她便于我们的子对象继承某个对象的具体属性时,该方式是最简单的方式。

12.构造器借用与属性拷贝法:

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);

所属模式:基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解:她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额,持续更新了这么多天,大概也就这么多了,能力有限,多多包涵!

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱(3)-JavaScript视频教程

Das obige ist der detaillierte Inhalt vonWie implementiert man Vererbung in Javascript? Fassen Sie verschiedene Möglichkeiten zur Implementierung der Vererbung in js zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn