Heim > Web-Frontend > js-Tutorial > JavaScript objektorientiert – Erstellen von Objekten mithilfe von Factory-Methoden und Konstruktormethoden

JavaScript objektorientiert – Erstellen von Objekten mithilfe von Factory-Methoden und Konstruktormethoden

黄舟
Freigeben: 2017-01-19 15:06:23
Original
1520 Leute haben es durchsucht

Im vorherigen Artikel haben wir die Erstellungsmethode einfacher JavaScript-Objekte vorgestellt. Das größte Problem einfacher JS-Objekte besteht darin, dass es keine Klassenbeschränkung gibt, sodass die Wiederverwendung von Objekten nicht realisiert werden kann und es keine Konvention dafür gibt in Betrieb genommen werden. Daher haben sich die Leute ein Fabrikmuster von Designmustern ausgeliehen, um JavaScript-Objekte zu erstellen.

Verwenden Sie Factory-Methoden, um JavaScript-Objekte zu erstellen

Die Idee der Factory-Methode besteht darin, ein Objekt in einer Funktion zu erstellen, dann die entsprechenden Eigenschaften und Methoden für das Objekt festzulegen und schließlich zurückzukehren das Objekt. Kapseln Sie durch Funktionen, um Objekte mit bestimmten Schnittstellen zu erstellen. Das Folgende ist ein Beispiel für die Verwendung der Factory-Methode zum Erstellen eines Personenobjekts:

function createPerson(name,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.say = function(){
    alert(this.name + "," + this.age);
  }
  return o;
}
// 实例化p1和p2对象
var p1 = createPerson("Leon",22);
var p2 = createPerson("Ada",20);
 
//调用p1和p2对象的say()方法
p1.say();
p2.say();
Nach dem Login kopieren

Obwohl die Verwendung der Factory-Methode das Klassenproblem effektiv löst, gibt es noch ein anderes Problem. Wir können den Datentyp der Objekte p1 und p2 nicht erkennen. Wir können typeof nur verwenden, um zu erkennen, dass das Objekt ein Objekttyp ist:

console.info(typeof p1);  // 控制台输出:Object
Nach dem Login kopieren

Wenn wir Instanzof verwenden möchten, um den Typ des Objekts zu bestimmen, dann p1 Instanzof?, welcher Typ sollte danach ausgefüllt werden? Instanz von? Wir wissen es nicht.

Verwenden Sie Konstruktoren, um JavaScript-Objekte zu erstellen

Da die Factory-Methode den spezifischen Typ des Objekts nicht bestimmen kann, wurde eine neue Methode zum Erstellen von JavaScript-Objekten vorgeschlagen – die Konstruktormethode. In JavaScript können Konstruktoren verwendet werden, um bestimmte Objekttypen zu erstellen. Beispielsweise werden Object und Array, diese nativen Konstruktoren von js, zur Laufzeit automatisch in der Ausführungsumgebung angezeigt. Wir können den Konstruktor auch anpassen, um Eigenschaften und Methoden benutzerdefinierter Typen zu definieren.

Die Methode zum Erstellen einer Klasse mithilfe eines Konstruktors ähnelt der Methode zum Erstellen einer Klasse basierend auf einer Factory. Der größte Unterschied besteht darin, dass der Name der Funktion der Name der Klasse ist. Gemäß der Konvention von Programmierstandards wird der erste Buchstabe einer Klasse normalerweise großgeschrieben. Wenn Sie einen Konstruktor zum Erstellen einer Klasse verwenden, wird die Attributdefinition über das Schlüsselwort this innerhalb der Funktion vervollständigt.

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.info(this.name + "," + this.age);
  }
}
// 通过new关键字来创建对象
var p1 = new Person("Leon",22);
var p2 = new Person("Ada",20);
// 调用对象的方法
p1.say();
p1.say();
Nach dem Login kopieren

Wie im obigen Code gezeigt, können wir nach Abschluss der Erstellung der Klasse das Objekt über das neue Schlüsselwort instanziieren.

Die Verwendung von Konstruktoren löst das Problem der Erkennung von Objekttypen sehr gut. Wir können das Schlüsselwort „instanceof“ verwenden, um festzustellen, ob das Objekt vom Typ „Person“ ist:

console.info(p1 instanceof Person);   //控制台显示:true                              
console.info(p2 instanceof Person);   //控制台显示:true
Nach dem Login kopieren

Darüber hinaus können wir es auch verwenden das Schlüsselwort „constructor“, um zu überprüfen, ob der Konstruktor des Objekts vom Typ Person ist:

console.info(p1.constructor == Person);   //控制台显示:true                              
console.info(p2.constructor == Person);   //控制台显示:true
Nach dem Login kopieren

Oder drucken Sie die Konstruktoren von p1 und p2 zum Vergleich direkt aus:

console.info(p1.constructor);
console.info(p2.constructor);
Nach dem Login kopieren

JavaScript objektorientiert – Erstellen von Objekten mithilfe von Factory-Methoden und Konstruktormethoden

Das Problem, das die Verwendung der Konstruktormethode mit sich bringt, besteht darin, dass in jedem Objekt eine Kopie der Methode vorhanden ist. Wenn das Objekt viele Methoden hat, wird es viel Speicherplatz beanspruchen.

In einigen fortgeschrittenen kompilierten objektorientierten Programmiersprachen (z. B. Java) werden Objektmethoden zur Laufzeit dynamisch im Stapelbereich generiert und belegen keinen Speicher. In Javascript ist bei Objekten, die mit der Konstruktormethode erstellt wurden, jede Methode im Objekt eine Kopie der Klassenmethode. Wenn das Objekt eine große Anzahl von Methoden enthält, belegt es viel Speicherplatz.

Wir können die Klassenmethoden in globalen Variablen definieren, sodass die Methoden in der Klasse auf dieselbe Funktion verweisen können. Der Code lautet wie folgt:

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  // 此时的类方法是一个全局方法的引用
  this.say = say;
}
//将方法设置为全局的方法
function say(){
  alert(this.name + "," + this.age);
}
Nach dem Login kopieren

Durch Festlegen der Klassenmethode als globale Methode kann das Problem gelöst werden, dass Methoden im Objekt Speicherplatz belegen. Zu diesem Zeitpunkt können die Methoden in allen durch erstellten Objekten gelöst werden Der Konstruktor zeigt auf dieselbe globale A-Funktion.

Wenn jedoch alle Methoden als globale Funktionen festgelegt sind, können diese Funktionen vom Fenster aufgerufen werden, wodurch die Kapselung des Objekts zerstört wird. Wenn ein Objekt über eine große Anzahl von Methoden verfügt, führt dies zu Code eine große Anzahl globaler Funktionen darin, was unserer Entwicklung nicht förderlich ist.

Um diese Mängel der Konstruktormethode zu beheben, müssen wir Prototypen zum Erstellen von Objekten verwenden. Im nächsten Artikel werden wir die Verwendung von Prototypen zum Erstellen von JavaScript-Objekten vorstellen.

Das Obige ist objektorientiert in JavaScript – es werden Factory-Methoden und Konstruktormethoden zum Erstellen von Objekten verwendet. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage