einfache Verwendung von .prototype, was passiert hinter den Kulissen?

Question

Ich habe ein Javascript-Buch gelesen, das erst vor kurzem begonnen hat, einzuführen. Ich habe auch einige andere stackoverflow Fragen auf .prototype und __proto__ betrachtet und sie alle haben einige Beispiele, die ein bisschen zu weit fortgeschritten für mich sind, und ich habe Probleme, sie zu verstehen. Jetzt erklärt das Buch dies auf eine sehr verwirrende Art und Weise, also dachte ich, ich würde hier nach dem Grundverständnis fragen. Heres etwas Code, den ich gerade gemacht habe

function Person(firstname,lastname){ 
    this.firstname = firstname; 
    this.lastname = lastname; 
} 

Person.prototype.getFullName = function(){ 
    return this.firstname + " " + this.lastname; 
} 
var john = new Person('John','Doe'); 
console.log(john); 

Jetzt heres, wo meine Verwirrung entsteht. Zu meinem Verständnis hinter den Kulissen hat jeder function eine , aber bis wir das Schlüsselwort von new verwenden, kommt es nicht wirklich ins Spiel.

Zu dem, was ich von meinem Buch verstehen oder ableiten kann, ist, dass .prototype hier uns erlaubt, eine Methode zur Person Funktion hinzuzufügen.

Kühl. Wenn ich also console.log(john.getFullName()); mache, erhalten wir John Doe. Nett! Genau wie vermutet. Aber wie kommt es, wenn ich mache console.log(john) zeigt es auf die Person Funktion und zeigt firstname: 'John' und lastname: Doe.

Was ist mit der Methode passiert, die wir gerade mit Person.prototype.getFullName hinzugefügt haben? Warum wird das nicht angezeigt, wenn wir John loggen?

Answer 1

Es wird angezeigt, wenn Sie das Dropdown-Menü __proto__ in der Konsole erweitern. Da Sie dem Prototyp die Funktion hinzugefügt haben, wird er angezeigt.

Answer 2

Objekte in Javascript Arbeit von ‚prototypische Vererbung‘, wo jedes Objekt regelmäßig Eigenschaften hat firstname, lastname sondern auch zu einem regelmäßigen Objekt verknüpft verwendet als ‚Prototyp‘ (Angabe in der __proto__ Eigenschaft). Der Verbindungsvorgang erfolgt automatisch, wenn Sie var john = new Person(...) tun: durch Person.prototype Angabe, weiß er, dass, wenn Sie eine Instanz von Person zu machen, sollte es zu Person.prototype

verknüpft werden Wenn Sie console.log(john), es wird nur die Eigenschaften zeigen direkt in die John Objekt.

Aber, wenn Sie john.getFullName(), Javascript Erbe Modell zu tun weiß, dass, wenn es nicht getFullName im john Objekt findet, dass es für sie rekursiv in __proto__ aussehen wird, bis er es findet. So wird es die getFullName Funktion in Person.prototype verwenden, weil es mit diesem Objekt verknüpft wurde, wenn john erstellt wurde.

Answer 3

Prototypen werden für die Vererbung in Javascript verwendet. Stellen Sie es sich so vor: Jedes Objekt (außer einem) hat einen Prototyp. dasjenige, das nicht ist, steht an der Spitze der Kette und ist das Ende der Vererbungshierarchie. Jedes Objekt in dieser Kette erhält alle Funktionen und Eigenschaften desjenigen darüber. Dies geschieht durch die Prototypen. Wenn Sie eine Funktion oder eine andere Variable zu einem Objektprototyp hinzufügen, so wie ich es verstehe, erhält jede Instanz dieses Objekts eine eigene Kopie davon. Die Sache mit Java-Skript ist, dass es 6 verschiedene Möglichkeiten gibt, um ein Objekt zu erstellen - das neue Schlüsselwort ist vollständig syntaktischer Zucker - und jeder erstellt ein Objekt. Dein Buch sollte irgendwann einmal gesagt haben, dass sogar Funktionen Objekte sind.

Javascript ist nicht so verwirrend. Es ist einfach kraftvoll und anders gestaltet.Es ist ein Wochen-Referenzsystem, das es robust, aber auch fehleranfällig aufgrund von Programmierfehlern macht.