Was ist objektorientiert? Objektorientiert ist eine Art Gedanken! (Unsinn).
Objektorientiert behandelt alle Schlüsselmodule in einem Programm als Objekte, und Module haben Attribute und Methoden. Wenn wir einige Eigenschaften und Methoden zusammenschließen, wird es in Zukunft sehr bequem sein und kann auch mühsame und sich wiederholende Arbeiten vermeiden. Als nächstes erklären wir die objektorientierte Implementierung in JS.
Fabrikmodell
Das Werksmuster ist ein bekanntes Designmuster im Bereich der Software-Engineering, und da Klassen in ECMascript nicht erstellt werden können, werden Objekte mit Funktionskapselung erstellt. Die Implementierungsmethode ist sehr einfach, dh ein Objekt in der Funktion erstellen, dem Objekt Attribute und Methoden zuweisen und dann das Objekt zurückgeben.
Funktion createBlog (Name, url) {var o = new Object (); O.Name = Name; o.url = url; o.sayurl = function () {alert (this.url); } return o;} var blog1 = createBlog ('wuyuchang', '//www.vevb.com/');Es ist ersichtlich, dass die Implementierungsmethode des Fabrikmusters sehr einfach ist und das Problem der Erstellung mehrerer ähnlicher Objekte löst. Das Werksmuster kann jedoch den Typ des Objekts nicht identifizieren, da es sich im Gegensatz zu Datum, Array usw. handelt, sodass das Konstruktor -Muster angezeigt wird.
Konstruktormodus
Der Konstruktor in ECMascript kann Objekte bestimmter Typen erstellen, ähnlich wie native JS -Objekte wie Array und Datum. Die Implementierungsmethode lautet wie folgt:
Funktionsblog (Name, url) {this.name = name; this.url = url; this.alerturl = function () {alert (this.url); }} var blog = neuer blog ('wuyuchang', '//www.vevb.com/')console.log(Blog -Instanz des Blogs); // true, bestimmen Sie, ob der Blog eine Instanz des Blogs ist. Das heißt, es löst das Problem, dass der Werksmodus nicht sein kannDieses Beispiel unterscheidet sich von dem Fabrikmodell mit Ausnahme des Funktionsnamens, sorgfältige Kinderschuhe sollten viele Unterschiede finden:
Der erste Buchstabe des Funktionsnamens wird aktiviert (obwohl der Standard nicht ausschließlich vorsieht, dass der erste Buchstabe laut Konvention aktiviert ist, wird der erste Buchstaben des Konstruktors aktiviert.
Objekt erstellen nicht angezeigt
Weisen Sie diesem Objekt Attribute und Methoden direkt zu
Keine Rückgabeerklärung
Erstellen Sie ein Objekt mit neu
In der Lage sein, Objekte zu erkennen (hier überwiegen Konstruktormuster die Fabrikmuster)
Obwohl Konstruktoren einfach zu bedienen sind, sind sie nicht ohne Nachteile. Das größte Problem bei der Verwendung von Konstruktoren besteht darin, dass sie die Methode jedes Mal neu erstellen müssen, wenn sie eine Instanz erstellen (theoretisch sind die Eigenschaften des Objekts jedes Mal, wenn sie ein Objekt erstellen, und die Methoden des Objekts sind gleich). Es ist jedoch nicht erforderlich, zweimal genau dieselbe Methode zu erstellen, damit wir die Funktion außerhalb des Objekts bewegen können (vielleicht haben einige Kinderschuhe die Nachteile gesehen, shhhh!).
Funktionsblog (Name, url) {this.name = name; this.url = url; this.alerturl = alerturl;} Funktion alerturl () {alert (this.url);} var blog = new Blog ('scjb51', 'http://sc.vevb.com/'), blog2 = new blog ('jb51', //www.Vevb.C. // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/Wir setzen Alerturl auf eine globale Funktion, so dass Blog- und Blog2 dieselbe Funktion zugibt, aber das Problem kommt wieder. Eine Funktion, die das Blog nur nur möchte, ist im globalen Bereich definiert, was zeigt, dass der globale Bereich seinen Namen etwas würdig ist. Noch inakzeptabler ist, dass viele Methoden im globalen Bereich definiert werden, das nur von bestimmten Objekten verwendet wird. Es ist nicht nur Raum verschwendet, es verliert offensichtlich auch eine objektorientierte Kapselung, sodass dieses Problem durch Prototypen gelöst werden kann.
Prototypmodus
Jede von uns erstellte Funktion hat ein Prototypattribut, das ein Zeiger auf ein Objekt ist, und der Zweck dieses Objekts besteht darin, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Der Vorteil der Verwendung von Prototypobjekten besteht darin, dass alle Objektinstanzen die Eigenschaften und Methoden teilen können, die sie enthält.
Funktion blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/'iblog.Prototype this.friend);} // Folgendes ist der Testcode var blog = new blog (), blog2 = new Blog (); blog.alertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog2.AgerertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http: //***.com'; blog.friend.pop (); // wyc1http: //***.comfr1,fr2,fr3blog2.AgerertInfo (); // WYC2HTTP: //++.comfr1,fr2,fr3Das Prototypmuster ist nicht ohne Mängel. Zunächst werden die Verbindung der Konstruktor -Übergabe -Initialisierungsparameter weggelassen. Infolgedessen erhalten alle Instanzen standardmäßig denselben Attributwert, was sehr unpraktisch ist, dies ist jedoch nicht das größte Problem des Prototyps. Das größte Problem mit dem Prototypmuster wird durch die Art des Teilens verursacht. Aufgrund der Freigabe ändert eine Instanz die Referenz und die andere ändert auch die Referenz. Daher verwenden wir normalerweise nicht allein Prototypen, sondern kombinieren Prototypmuster mit Konstruktormustern.
Gemischter Modus (Prototypenmodus + Konstruktormodus)
Funktionsblog (Name, URL, Freund) {this.name = name; this.url = url; this.friend = Friend;} blog.Prototype.alertInfo = function () {alert (this.name + this.url + this 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.AgerertInfo (); // Wychttp: //**.coma,bIm Hybridmodus wird der Konstruktormodus verwendet, um Instanzattribute zu definieren, während der Prototypmodus zum Definieren von Methoden und gemeinsam genutzten Attributen verwendet wird. Jede Instanz hat ein eigenes Instanzattribut, aber gleichzeitig teilt sie Methoden und speichert Speicher in maximalem Maße. Darüber hinaus unterstützt dieser Modus auch die Übergabe von Anfangsparametern. Viele Vorteile. Dieses Muster ist die am häufigsten verwendete und am meisten anerkannte Methode zum Erstellen benutzerdefinierter Objekte in ECMascript.
Dynamischer Prototypmodus
Der dynamische Prototypmodus verkauft alle Informationen im Konstruktor und durch Initotyp des Prototyps im Konstruktor (nur der Prototyp wird initialisiert, wenn das erste Objekt instanziiert ist), können Sie auswählen, ob der Prototyp initialisiert werden muss, indem die Methode gültig ist.
Funktionsblog (Name, url) {this.name = name; this.url = url; if (typeof this.alertInfo! Blog.prototype.alertInfo = function () {alert (thia.name + this.url); }}} var blog = new Blog ('wuyuchang', 'http://tools.vevb.com'), blog2 = new Blog ('wyc', 'http: ***. com');Sie können sehen, dass im obigen Beispiel einmal das Fenster "Exe Time" angezeigt wird, dh wenn Blog initialisiert wird, muss Blog2 den Prototyp nicht initialisieren. Um Objekte mit diesem Muster zu erstellen, kann es als perfekt angesehen werden.
Dieser Blog -Beitrag bezieht sich auf die dritte Ausgabe von "JavaScript Advanced Programing", aber die Sprache wurde vereinfacht und die Beispiele wurden neu geschrieben. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht und Antwort, und der Autor aktualisiert den Blog.