Teilen Sie zunächst Beispiele für den JS -Prototyp -Vererbung für Ihre Referenz. Der spezifische Inhalt ist wie folgt
1. JS -Prototyp -Vererbung
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> JS-Prototyp-Vererbung </title> </head> <body> <!-Prototypenerbe-> <skript type {}; // Dieser Satz ist der Kern des Prototypenvereritzs. Das Prototypobjekt der Funktion ist das Objekt literal_f.prototype = obj; Neue _f; } // ein Objekt literaler erster var Animal = {etwas: 'Apple', eat: function () {console.log ("eat" + this.soming); }} // keine Notwendigkeit, eine Unterklasse von Person zu definieren, sondern nur einen klonenden var cat = klon (Tier) durchführen; // Sie können den von der Person bereitgestellten Standardwert direkt abrufen, oder Sie können Attribute und Methoden console.log (cat.eat () addieren oder ändern. Cat.soming = 'orange'; console.log (cat.eat ()); // die Unterklasse deklarieren und einen Klonvar jemand = Klon (Katze) ausführen; </script> </body> </html>2. Arbeitsprinzip des JavaScript -Prototyps Vererbung
Es ist bekannt, dass JavaScript den Prototyp -Vererbung annimmt, aber da es nur eine Instanz der Implementierung liefert, ist der neue Operator standardmäßig die Erklärung immer verwirrend. Lassen Sie uns erklären, welcher Prototyp -Vererbung ist und wie die Vererbung des Prototyps in JavaScript verwendet werden kann.
Definition des Prototypenvererbels
Wenn Sie die Erklärung zum JS -Prototyp -Vererbung lesen, sehen Sie häufig den folgenden Text:
Bei der Suche nach den Eigenschaften eines Objekts durchquert JavaScript die Prototyp -Kette nach oben, bis das Attribut des angegebenen Namens gefunden wurde. - Aus dem geheimen Garten von JavaScript
Die meisten JavaScript -Implementierungen verwenden das __Proto__ -Attribut, um die Prototyp -Kette eines Objekts darzustellen. In diesem Artikel werden wir den Unterschied zwischen __Proto__ und Prototyp sehen.
Hinweis: __Proto__ ist eine informelle Verwendung, die nicht in Ihrem Code erscheinen sollte. Hier verwenden wir es einfach, um zu erklären, wie die Vererbung des JavaScript -Prototyps funktioniert.
Der folgende Code zeigt, wie die JS -Engine nach Eigenschaften aussieht:
Funktion getProperty (obj, prop) {if (obj.hasownProperty (prop)) return obj [prop] else wenn (obj .__ proto__!Lassen Sie uns ein gemeinsames Beispiel geben: Ein zweidimensionaler Punkt hat eine zweidimensionale Koordinate XY, die einer Druckmethode ähnlich ist.
Mit der Definition des zuvor erwähnten Prototyp -Vererbung erstellen wir einen Objektpunkt mit drei Eigenschaften: x, y und drucken. Um einen neuen zweidimensionalen Punkt zu erstellen, müssen wir ein neues Objekt erstellen, so dass es __Proto__-Attributpunkt auf Punkt zeigt:
var point = {x: 0, y: 0, drucken: function () {console.log (this.x, this.y); }}; var p = {x: 10, y: 20, __Proto__: point}; p.print (); // 10 20JavaScript Weird Prototypereritanz
Was verwirrend ist, ist, dass niemand, der Prototyp -Erbschaft lehrt, einen solchen Code angibt, aber den folgenden Code gibt:
Funktionspunkt (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p = neuer Punkt (10, 20); p.print (); // 10 20Dies unterscheidet sich von dem, was ich gesagt habe. Hier wird Punkt zu einer Funktion, und es gibt auch ein Prototypattribut, und es gibt einen neuen Operator. Was ist damit los?
Wie der neue Bediener funktioniert
Der Schöpfer Brendan Eich wollte JS nicht wesentlich von traditionellen objektorientierten Programmiersprachen wie Java und C ++ unterscheiden. In diesen Sprachen verwenden wir den neuen Bediener, um ein neues Objekt in der Klasse zu instanziieren. Also schrieb er einen neuen Betreiber in JS.
In C ++ gibt es ein Konstruktorkonzept für die Initanzen von Instanzeigenschaften, sodass der neue Bediener auf Funktionen gerichtet sein muss.
Wir müssen die Objektmethode an einem Ort setzen. Da wir die Prototyp -Sprache verwenden, werden wir sie in die Prototyp -Eigenschaften der Funktion einfügen.
Der neue Bediener akzeptiert eine Funktion F und seine Parameter: Neue F (Argumente ...). Dieser Prozess ist in drei Schritte unterteilt:
Erstellen Sie eine Instanz der Klasse. Dieser Schritt soll die __Proto__ -Eigenschaft eines leeren Objekts auf F.Prototyp einstellen.
Initialisieren Sie die Instanz. Die Funktion F wird im Parameter übergeben und aufgerufen, und das Schlüsselwort, das auf diese Instanz festgelegt ist.
Gibt die Instanz zurück.
Nachdem wir wissen, wie neu funktioniert, können wir es im JS -Code implementieren:
Funktion neu (f) {var n = {'__Proto__': f.Prototype}; /*Schritt 1*/ return function () {f.apply (n, Argumente); /*Schritt 2*/ return n; /*Schritt 3*/}; }Ein kleines Beispiel für seine Arbeitssituation:
Funktionspunkt (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p1 = neuer Punkt (10, 20); p1.print (); // 10 20 console.log (p1 -Instanzpunkt); // True var p2 = neu (Punkt) (10, 20); p2.print (); // 10 20 console.log (p2 -Instanzpunkt); // WAHRWahrer Prototyp -Vererbung in JavaScript
Die ECMA -Spezifikation von JS ermöglicht es uns nur, den neuen Operator für den Prototyp -Vererbung zu verwenden. Aber der große Meister Douglas Crockford entdeckte einen Weg, um neue Vererbung für einen echten Prototyp zu erreichen! Er schrieb das Objekt auf. Erstellen Sie die Funktion wie folgt:
Object.Create = Funktion (Eltern) {Funktion f () {} f.Prototype = parent; Neue f () zurückgeben; };Das sieht seltsam aus, aber es ist ziemlich präzise: Es schafft ein neues Objekt und Prototypen zu jedem Wert, den Sie festlegen möchten. Wenn wir __Proto__ zulassen, können wir auch Folgendes schreiben:
Object.create = function (übergeordnet) {return {'__Proto__': Eltern}; };Der folgende Code ermöglicht unserem Standpunkt, den echten Prototyp -Vererbung zu übernehmen:
var point = {x: 0, y: 0, drucken: function () {console.log (this.x, this.y); }}; var p = Object.create (Punkt); px = 10; PY = 20; p.print (); // 10 20abschließend
Wir haben gelernt, was der JS -Prototyp -Vererbung ist und wie JS ihn auf eine bestimmte Weise implementieren kann. Die Verwendung der realen Prototyperbanz (wie Object.Create und __Proto__) hat jedoch immer noch die folgenden Nachteile:
Standardmangel: __ Proto__ ist keine Standardverwendung oder sogar eine Missbilligung. Gleichzeitig sind auch das ursprüngliche Objekt.Create und die Originalversion von Daoye unterschiedlich.
Schlechte Optimierung: Ob ein natives oder maßgeschneidertes Objekt. Schalten Sie die Leistung weitaus geringer als die von neuer und ersterer ist so langsam wie 10 -mal langsamer als der letztere.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.