Einfacher Javascript-Code zum Verständnis prototypbasierter OOP-Grundlagen [geschlossen]

8

Ich kenne Javascript seit einiger Zeit, obwohl ich kein schwerer Benutzer bin, kenne ich es zum ersten Mal aus der Zeit, als Netscape mein Browser war. Ich verstehe die wichtigsten Dinge ziemlich genau, aber da der JavaScript-Ansatz für OOP prototypisch ist, habe ich einige Probleme, ihn zu verstehen.

Ein Problem, das noch hinzugefügt werden muss, scheint, dass Dinge auf mehr als eine Weise erledigt werden können, und hier helfen Bücher nicht viel, weil sie alle Beispiele auf den Tisch legen, was es schwierig macht, das Tempo zu halten.

Was ich zum Starten brauche, ist nur eine Möglichkeit, wenn mir jemand mit dem einfachsten Code helfen kann, ein Beispiel, in dem ich sehen kann, wie das prototypische OOP-Modell funktioniert?

Um hilfreich zu sein, sollte der Code ein geerbtes Objekt haben, auf die Eigenschaft eines Elternteils und seine geerbten Eigenschaften sowie auf die Funktion eines Elternteils zugreifen, die Funktion eines Elternteils überschreiben und eine Instanz einer Mehrfachvererbung haben, bei der ein Objekt zwei andere Objekte erbt.

Eduard Florinescu
quelle
Hallo und ein etwas verspätetes Willkommen bei Programmierern. Leider handelt es sich bei dieser Frage explizit um 5 Fragen und eine Reihe anderer impliziter Fragen. Dies macht es sehr unkonzentriert und es wird wahrscheinlich geschlossen. Wenn Sie Ihre Frage fokussieren können, ist sie möglicherweise für die Site-Richtlinien akzeptabler. Hab einen schönen Tag.
Weltingenieur
@WorldEngineer Ich denke, in einer anderen Sprache können die meisten Antworten auf die 5 pünktliche Frage in einer oder wenigen Zeilen gegeben werden. Leider kann ich nicht alle 5 Fragen trennen und einzeln stellen, oder? Ist das erlaubt?
Eduard Florinescu
1
Bitte stellen Sie jeweils eine Frage. Wenn Sie dann weitere Fragen haben, stellen Sie diese als separate, aber verknüpfte Fragen.
ChrisF
1
@ WorldEngineer Ich habe die Frage so bearbeitet, dass sie nur eine ist
Eduard Florinescu
1
Übrigens, eine Sache, die bei der klassischen Vererbung falsch war, ist die vollständige Trennung von Methoden und Eigenschaften. Auf einem Computer mit Neumann-Architektur (ARM, PowerPC, Intel) ist dies bedeutungslos. Dies ist etwas, was JS gut macht. Und dies waren sehr gute Fragen, um zu veranschaulichen, wie Proto-Oop funktioniert.
Aadaam

Antworten:

6

Wie kann ein Objekt geerbt werden?

function inherit(o){ // inherit is called Object.create in modern implementations
    var F= function(){};
    F.prototype=o;
    return new F();
}

var parent = {
    name: "Josh",
    print: function(){
       console.log("Hello, "+this.name);
    }
};
parent.print(); // Hello, Josh
var child = inherit(parent);
child.name = "Jeremy";
parent.print(); //Hello, Josh
child.print();  //Hello, Jeremy

Wie kann ich das Eigentum eines Elternteils sehen?

console.log(child.__proto__.name); //won't work in IE; also see getPrototypeOf

Wie kann ich auf die Funktion eines Elternteils zugreifen?

Object.getPrototyepeOf(child).print(); // or
child.print.apply(parent) //functions are just objects, and 'this' pointer can point to wherever you want

Wie kann ich die Funktion eines Elternteils überschreiben?

child.print = function(){
    console.log("Hi ", this.name);
}

parent.print(); //Hello, Josh
child.print();  //Hi, Jeremy

Wie kann ein Objekt zwei Objekte erben?

//in chain?

grandchild = inherit(child);

//otherwise, there's no way.
grandchild.name = "Eddie";
grandchild.print();

Siehe auch:

Aadaam
quelle
Ich habe bearbeitet, weil Funktion F nicht {} und Objekt hatte; (Semikolon) statt (Komma) jetzt gibt es keinen Fehler in der Konsole. Es funktioniert und ich weiß nicht, warum es jetzt so einfach erscheint. Einer meiner Kollegen hat auch gute Teile, aber in diesem Fall hat Ihr Beispiel mehr geholfen. Vielen Dank.
Eduard Florinescu
2

Der urkomische Experte @venkat_s teilt eine Analogie, um die prototypische Vererbung zu erfassen.

Hier ist ein Beispiel seines Humors: "Das Besondere an JavaScript ist, dass es Sie nicht anschreit. Es ist Ihr Freund. Es sagt Ihnen nicht, wenn etwas nicht stimmt, es funktioniert einfach nicht mehr. Rufen Sie nicht mehr an."

Zur Vererbung fuhr er fort: "Der Prototyp ist wie ein Rucksack - für das Objekt. Für alles in JavaScript, was ein Objekt ist, hat er einen Rucksack, und Sie können Sachen hineinstecken. Und alle Ihre Objekte können darauf zugreifen."

Ich hoffe, das hilft.

Jack Stone
quelle
Ich nehme an, der Rucksack ist der Prototyp?
Eduard Florinescu
Ja, Entschuldigung für die Kürze. Er fuhr fort, die Analogie auf Mehrfachvererbung auszudehnen - "Es ist, als hätte man einen Rucksack und eine Brieftasche.", "Man steckt einfach alles hinein.", "Manchmal ist der Fehler bei der prototypischen Vererbung, dass ... man verlieren kann deine Brieftasche, und du musst sie zurückbekommen. " Dies ist die Herausforderung, der Sie sich möglicherweise stellen müssen, die jedoch grundlegend zu lösen ist.
Jack Stone
2

Code vergessen. Die einfachste Erklärung.

Funktionskonstruktoren erstellen Objekte. In JS sind Funktionen selbst Objekte, die Eigenschaften haben können. Jede Funktion verfügt über eine Prototyp-Eigenschaft, die jedes Objekt enthalten kann. Sie können jeden Konstruktorprototyp einfach im laufenden Betrieb einstellen. Wenn Sie beispielsweise Arrays ruinieren möchten,

Array.prototype = {
    oneTrueMethodToRuleThemAll: function(){
        alert('arrays are now hosed');
    }
}

Das Prototypobjekt ist im Grunde ein Fallback, der von Instanzen überprüft wird, wenn Sie versuchen, auf eine Eigenschaft zu verweisen, die sie nicht haben. Wenn das Prototypobjekt nicht über diese Methode verfügt, wird das Prototypobjekt des Konstruktors auf die Methode überprüft. Das ist die Kette, der gefolgt wird.

Es geht also nicht wirklich um Vererbung. Es geht darum: "Oh, das hast du nicht, nun, hat deine Mutter es in ihrer Prototypentasche? Nein? Wie wäre es mit ihrer Großmutter? Nein? Wie wäre es dann ... bis wir zu Eva kommen, oder dem Prototyp des Objektkonstruktors, der Hier hört das Geld immer auf.

Es ist also nicht so, dass Ihre Instanzen das Material im Prototyp aufnehmen oder behalten. Wenn JavaScript eine Methode eines Objekts aufruft, gibt es nur einen Fallback-Prozess, um die Kette object-> constructor.prototype zu überprüfen, um festzustellen, ob die unbekannte Methode gefunden werden kann. Wenn Sie einen Konstruktorprototyp ändern, "erhalten" alle vorhandenen Instanzen diese Methode. Sie bekommen überhaupt nichts. Es ist ihre Fallback-Gruppe von Objekten für die Suche, die die neue Methode erhält.

Erik Reppen
quelle