Detaillierte Erläuterung der prototypischen und parasitären Vererbung in JS (Codebeispiel)

Dieser Artikel enthält eine detaillierte Erklärung (Codebeispiel) der prototypischen und parasitären Vererbung in JS. Ich hoffe, dass er für Freunde hilfreich ist.

Vorwort: Ich habe kürzlich „Javascript Advanced Programming“ gelesen. Für mich sind die Übersetzungen der chinesischen Version des Buches an vielen Stellen unbefriedigend, daher versuche ich, es mit dem zu interpretieren, was ich verstehe. Sollten Fehler oder Auslassungen vorliegen, sind wir Ihnen sehr dankbar, wenn Sie uns darauf hinweisen. Der Großteil des Inhalts dieses Artikels stammt aus „JavaScript Advanced Programming, Third Edition“.

Prototypische Vererbung

Douglas Crockford schrieb 2006 einen Artikel mit dem Titel Prototypische Vererbung in JavaScript (Prototypische Vererbung in JavaScript).

In diesem Artikel stellt er eine Methode zur Implementierung der Vererbung vor, die keine Konstruktoren im engeren Sinne verwendet.

Die Idee besteht darin, mithilfe von Prototypen neue Objekte basierend auf vorhandenen Objekten zu erstellen, ohne benutzerdefinierte Typen erstellen zu müssen.

Um dieses Ziel zu erreichen, gab er folgende Funktion.

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

Innerhalb der Funktion object() wird zunächst ein temporärer Konstruktor erstellt, dann wird das übergebene Objekt als Prototyp dieses Konstruktors verwendet und schließlich wird ein neues Instanzobjekt dieses temporären Typs zurückgegeben.

Im Wesentlichen führt object() eine flache Kopie des übergebenen Objekts aus.

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

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = object(person);

/*
person1 = function object(person){
    function F(){};
    F.prototype = person1;
    return new F();
}()

person1 = function object({
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}){
    function F(){};
    F.prototype = {
        name: "Shaw",
        friends: ["Sharon", "Sandy", "Van"]
    }
    return {
    }
}

person1 = {

};

{}.__proto__ = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}
*/

person1.name = "Roc";
person1.friends.push("Roster");

var person2 = object(person);

person2.name = "Linda";
person2.friends.push("Jobs");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]

Die von Crockford befürwortete prototypische Vererbung erfordert, dass Sie ein Objekt haben müssen, das als Basis für ein anderes Objekt dienen kann.

Wenn ein solches Objekt vorhanden ist, können Sie es an die Funktion object() übergeben und das erhaltene Objekt dann entsprechend den spezifischen Anforderungen ändern.

ECMAscript5 standardisiert die prototypische Vererbung durch die neue Methode Object.create().
Diese Methode akzeptiert zwei Parameter: ein Objekt, das als Prototyp des neuen Objekts verwendet wird, und (optional) ein Objekt, um zusätzliche Eigenschaften für das neue Objekt zu definieren.

Die Methoden Object.create() und object() verhalten sich bei der Übergabe eines Parameters gleich.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = Object.create(person);
person1.name = "Roc";
person1.friends.push("Roster");

var person2 = Object.create(person);
person2.name = "Linda";
person2.friends.push("Messi");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]

Der zweite Parameter der Object.create()-Methode hat das gleiche Format wie der zweite Parameter der Object.defienProperties()-Methode:

Jede Eigenschaft wird durch ihren eigenen Deskriptor von definiert .

Jede auf diese Weise angegebene Eigenschaft überschreibt die gleichnamige Eigenschaft des Prototypobjekts.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Selina"]
}

var person1 = Object.create(person, {
    name: {
        value: "Roc"
    }
})

console.log(person1.name); //"Roc"

Browser, die die Object.create()-Methode unterstützen, sind IE9+, Firefox 4+, Opera 12+ und Chrome.

Anwendbare Szenarien:

Wenn kein Bedarf besteht, einen Konstruktor zu erstellen, Sie aber nur ein Objekt einem anderen Objekt ähnlich halten möchten, ist die prototypische Vererbung voll funktionsfähig.

Es ist wichtig zu bedenken, dass Eigenschaften, die Referenztypwerte enthalten, immer den entsprechenden Wert gemeinsam nutzen, genau wie bei der Verwendung des Prototypmusters.

Parasitäre Vererbung

Parasitäre Vererbung ist eine Idee, die eng mit der Prototypen-Vererbung verwandt ist und auch vom großen Gott Crockerford populär gemacht wurde.

Die Idee der parasitären Vererbung ähnelt dem parasitären Konstruktor- und Fabrikmuster.

Erstellen Sie eine Funktion, die lediglich den Vererbungsprozess kapselt, das Objekt intern auf irgendeine Weise erweitert und das Objekt zurückgibt, als ob es wirklich die ganze Arbeit erledigt hätte.

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

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

In diesem Beispiel empfängt die Funktion createAnother() einen anderen Parameter, nämlich das Objekt, das als Basis für das neue Objekt verwendet wird.
Übergeben Sie dann den Objektparameter (Original) an die Funktion object() und weisen Sie das zurückgegebene Ergebnis dem Klonen zu.

Fügen Sie dem Klonobjekt eine neue Methode sayHi() hinzu und geben Sie schließlich das Klonobjekt zurück.

Sie können die Funktion createAnother() wie folgt verwenden:

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

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

var person = {
    name: "Shaw",
    friends: ["Sandy", "Sharon", "Van"]
}

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); //"hi"

Der Code in diesem Beispiel gibt ein neues Objekt basierend auf einer Person zurück – anotherPerson. Das neue Objekt verfügt nicht nur über alle Eigenschaften und Methoden von person, sondern auch über eine eigene sayHi()-Methode.

Parasitäre Vererbung ist auch ein nützliches Muster, wenn es in erster Linie um Objekte und nicht um benutzerdefinierte Typen und Konstruktoren geht.

Die in der vorherigen Demonstration des Vererbungsmodus verwendete Funktion object() ist nicht erforderlich. Jede Funktion, die ein neues Objekt zurückgeben kann, ist für diesen Modus geeignet.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der prototypischen und parasitären Vererbung in JS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!