JS objektorientierte grundlegende Erklärung (Fabrikmodus, Konstruktormodus, Prototypmodus, gemischter Modus, dynamischer Prototypmodus)_Javascript-Kenntnisse

Was ist objektorientiert? Objektorientiert ist ein Gedanke! (Unsinn).

Objektorientiert kann die Schlüsselmodule im Programm als Objekte betrachten, und die Module verfügen über Eigenschaften und Methoden. Wenn wir auf diese Weise einige Eigenschaften und Methoden kapseln, ist die Verwendung in Zukunft sehr bequem und wir können auch mühsame und sich wiederholende Arbeiten vermeiden. Als nächstes erkläre ich die objektorientierte Implementierung in JS.

Werksmodus

Factory-Muster ist ein bekanntes Entwurfsmuster im Bereich der Softwareentwicklung. Da in ECMAScript keine Klassen erstellt werden können, wird die Funktionskapselung verwendet, um Objekte mit bestimmten Schnittstellen zu erstellen. Die Implementierungsmethode ist sehr einfach: Erstellen Sie ein Objekt innerhalb der Funktion, weisen Sie dem Objekt Eigenschaften und Methoden zu und geben Sie dann das Objekt zurück.

function 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', 'http://www.jb51.net/');

Sie können sehen, dass die Implementierungsmethode des Factory-Musters sehr einfach ist, wodurch das Problem der Erstellung mehrerer ähnlicher Objekte gelöst wird. Das Factory-Muster kann jedoch den Typ der Objekte nicht identifizieren, da es sich im Gegensatz zu Date, Array usw. um Objekte handelt. usw., es gibt also ein Konstruktormuster.

　Konstruktormuster

Konstruktoren in ECMAScript können Objekte bestimmter Typen erstellen, ähnlich wie native JS-Objekte wie Array und Date. Die Implementierungsmethode lautet wie folgt:

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = function() {
    alert(this.url);
  }
}

var blog = new Blog('wuyuchang', 'http://www.jb51.net/');
console.log(blog instanceof Blog);  // true， 判断blog是否是Blog的实例，即解决了工厂模式中不能

Außer den unterschiedlichen Funktionsnamen zwischen diesem Beispiel und dem Werksmodell sollten vorsichtige Kinder viele Unterschiede feststellen:

Der erste Buchstabe des Funktionsnamens sollte großgeschrieben werden (Obwohl der Standard nicht unbedingt vorschreibt, dass der erste Buchstabe großgeschrieben werden muss, sollte der erste Buchstabe des Konstruktors vereinbarungsgemäß großgeschrieben werden
Kein erstelltes Objekt angezeigt
Weisen Sie diesem Objekt direkt Eigenschaften und Methoden zu
Keine Rückgabeerklärung
Verwenden Sie new, um Objekte zu erstellen
Kann Objekte erkennen (hier ist das Konstruktormuster besser als das Fabrikmuster)

Obwohl der Konstruktor einfach zu verwenden ist, ist er nicht ohne Mängel. Das größte Problem bei der Verwendung des Konstruktors besteht darin, dass die Methode jedes Mal neu erstellt werden muss, wenn eine Instanz erstellt wird (theoretisch sind dies die Eigenschaften des Objekts). Jedes Mal, wenn ein Objekt erstellt wird, ist es anders, aber es ist nicht notwendig, genau dieselbe Methode zweimal zu erstellen, sodass wir die Funktion außerhalb des Objekts verschieben können (vielleicht haben einige Kinder die Mängel bereits gesehen). boo!).

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = alertUrl;
}

function alertUrl() {
  alert(this.url);
}

var blog = new Blog('scjb51', 'http://sc.jb51.net/'),
  blog2 = new Blog('jb51', 'http://www.jb51.net/');
blog.alertUrl();  // http://sc.jb51.net/
blog2.alertUrl();  // http://www.jb51.net/

Wir legen AlertUrl als globale Funktion fest, sodass blog und blog2 auf dieselbe Funktion zugreifen. Das Problem tritt jedoch erneut auf. Wir definieren eine Funktion, die eigentlich nur von Blog verwendet wird. Der globale Bereich ist Was seinen Namen einigermaßen verdient, ist, dass viele Methoden im globalen Bereich definiert sind, die nur von bestimmten Objekten verwendet werden, und dass dadurch offensichtlich die objektorientierte Kapselung verloren geht, sodass dies durch Prototypen gelöst werden kann . Frage.

　Prototyp-Modus

Jede von uns erstellte Funktion verfügt über ein Prototypattribut, das einen Zeiger auf ein Objekt darstellt. 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 eines Prototypobjekts besteht darin, dass alle Objektinstanzen die darin enthaltenen Eigenschaften und Methoden gemeinsam nutzen können.

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://tools.jb51.net/';
Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend );
}

// 以下为测试代码
var blog = new Blog(),
  blog2 = new Blog();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4
blog2.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4

blog.name = 'wyc1';
blog.url = 'http://***.com';
blog.friend.pop();
blog2.name = 'wyc2';
blog2.url = 'http://+++.com';
blog.alertInfo();  // wyc1http://***.comfr1,fr2,fr3
blog2.alertInfo();  // wyc2http://+++.comfr1,fr2,fr3

Das Prototyp-Muster ist nicht ohne Mängel. Erstens lässt es den Konstruktor weg, Initialisierungsparameter zu übergeben. Dies ist sehr unpraktisch, aber es ist nicht möglich ist immer noch kein Prototyp. Das größte Problem mit dem Prototypmuster liegt in der Art der Freigabe. Wenn eine Instanz die Referenz ändert, ändert sich auch die Referenz. Daher verwenden wir normalerweise nicht nur Prototypen, sondern kombinieren Prototypmuster und Konstruktormuster.

　Gemischter Modus (Prototypmodus, Konstruktormodus)

function Blog(name, url, friend) {
  this.name = name;
  this.url = url;
  this.friend = friend;
}

Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend);
}

var blog = new Blog('wuyuchang', 'http://tools.jb51.net/', ['fr1', 'fr2', 'fr3']),
  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2
blog2.alertInfo();  // wychttp://**.coma,b

Im gemischten Modus wird der Konstruktormodus zum Definieren von Instanzeigenschaften verwendet, während der Prototypmodus zum Definieren von Methoden und gemeinsam genutzten Eigenschaften verwendet wird. Jede Instanz verfügt über eigene Instanzattribute, teilt jedoch gleichzeitig Methoden, wodurch maximal Speicherplatz gespart wird. Darüber hinaus unterstützt dieser Modus auch die Übergabe von Anfangsparametern. Die Vorteile sind vielfältig. Dieser Modus ist die am weitesten verbreitete und anerkannteste Methode zum Erstellen benutzerdefinierter Objekte in ECMAScript.

　Dynamischer Prototypenmodus

Der dynamische Prototypmodus kapselt alle Informationen im Konstruktor. Durch Initialisieren des Prototyps im Konstruktor (nur der Prototyp wird initialisiert, wenn das erste Objekt instanziiert wird) können Sie auswählen, ob der Prototyp initialisiert werden soll, indem Sie beurteilen, ob die Methode vorhanden ist gültig. .

function Blog(name, url) {
  this.name = name;
  this.url = url;

  if (typeof this.alertInfo != 'function') {
    // 这段代码只执行了一次
    alert('exe time');
    Blog.prototype.alertInfo = function() {
      alert(thia.name + this.url);
    }
  }
}

var blog = new Blog('wuyuchang', 'http://tools.jb51.net'),
  blog2 = new Blog('wyc', 'http:***.com');

Sie können sehen, dass das Fenster im obigen Beispiel nur einmal zur „exe-Zeit“ angezeigt wird, d. h. wenn der Blog initialisiert wird. Auf diese Weise muss blog2 den Prototyp nicht mehr initialisieren Erstellen von Objekten in diesem Modus.

Dieser Blog-Beitrag bezieht sich auf die 3. Ausgabe von „Advanced Programming with JavaScript “, aber die Sprache wurde vereinfacht und die Beispiele wurden neu geschrieben. Wenn Sie etwas nicht verstehen, verlassen Sie es bitte eine Antwort und der Autor wird den Blog aktualisieren.