Benutzerdefinierte JavaScript-Typen

In JavaScript gibt es viele Modi zum Erstellen eines Objekts mit benutzerdefinierten Eigenschaften und Methoden, die im Folgenden einzeln vorgestellt werden.
1. Erstellen Sie das Muster direkt. Dies ist das einfachste und unkomplizierteste Muster. Erstellen Sie zunächst ein Objekt vom Referenztyp und fügen Sie ihm dann benutzerdefinierte Eigenschaften und Methoden hinzu. Der Beispielcode lautet wie folgt:

1 var person = new Object();
2 person.name = "Sam";
3 person.age = 16;
4 person.speak = function(){
5 warning(this.name + "is " + this.age + "years old");
6 }
7 person.speak();

Sie können oben sehen, dass ein Objekt vom Typ Objekt erstellt wird und ihm dann die Attribute „Name“ und „Alter“ sowie eine Speak-Methode hinzugefügt werden. Obwohl das direkte Erstellen eines Musters einfach ist, liegt der Nachteil auf der Hand: Wenn wir viele identische Objekte erstellen müssen, müssen wir den Code jedes Mal wiederholt schreiben. Um dieses Problem zu lösen, können wir den Prozess der Objekterstellung kapseln, sodass wir das folgende Factory-Muster haben.
2. Werksmodus. Das Factory-Muster ist ein häufig verwendetes Entwurfsmuster in der Programmierung. Es kapselt hauptsächlich den Prozess der Objekterstellung. Der Beispielcode lautet wie folgt:

1 Funktion createPerson(name, age){
2 var person = new Object();
3 person.name = name;
4 person.age = age;
5 person.speak = function(){
6 warning(this.name + " ist " + this.age + "years old");
7 }
8 return person;
9 }
10 var person1 = createPerson("Sam", 16);
11 var person2 = createPerson("Jack", 18);

Nach der Verwendung des Factory-Musters wird das Erstellen von Objekten desselben Typs einfach. Das Fabrikmuster löst jedoch nicht das Problem der Objektidentifizierung, das heißt, wir können den spezifischen Typ des erstellten Objekts nicht bestimmen. Entwickler mit Erfahrung in der objektorientierten Programmierung wissen, dass die Erstellung von Objekten auf Klassen basieren sollte. Sobald Sie eine bestimmte benutzerdefinierte Klasse haben, können Sie Objekte dieser Klasse erstellen. Glücklicherweise können wir in JavaScript eine Klasse über das Konstruktormuster simulieren.
3. Konstruktormuster. Es gibt keinen Unterschied zwischen Konstruktoren und gewöhnlichen Funktionen. Als Konstruktor kann jede gewöhnliche Funktion verwendet werden, solange der neue Operator verwendet wird; jeder Konstruktor kann auch als gewöhnliche Funktion aufgerufen werden. In JavaScript gibt es jedoch eine Konvention, dass der erste Buchstabe des als Konstruktor verwendeten Funktionsnamens großgeschrieben werden muss. Der Beispielcode lautet wie folgt:

1 function Person(name, age){
2 this.name = name;
3 this.age = age;
4 this .speak = function(){
5 warning(this.name + "is " + this.age + "years old");
6 }
7 }
8 var person1 = neue Person ("Sam ", 16);
9 var person2 = new Person("Jack", 18);

Sie können sehen, dass wir dies im Konstruktor verwenden, um Eigenschaften und Methoden hinzuzufügen. das Was bedeutet das? Wenn wir ein Personenobjekt erstellen, bezieht sich dies auf das erstellte Objekt. Jetzt können wir die spezifischen Objekttypen Person1 und Person2 identifizieren. Nach der Verwendung von Alert (Person1 InstanceOf Person) können Sie feststellen, dass der Ausgabewert wahr ist. Aber das Konstruktormuster hat auch seine eigenen Mängel, das heißt, die im Konstruktor deklarierten Methoden werden jedes Mal neu erstellt, wenn ein neues Objekt erstellt wird (in JavaScript sind Funktionen auch Objekte). Mit anderen Worten: Die Methoden innerhalb des Konstruktors sind an das Objekt und nicht an die Klasse gebunden. Die Ausgabe des folgenden Codes kann unsere Schlussfolgerung überprüfen.

1 warning(person1.speak == person2.speak); // false
Eine relativ einfache Möglichkeit, dieses Manko zu beheben, besteht darin, die Funktionsdeklaration außerhalb des Konstruktors zu platzieren, das heißt:

1 function Person(name, age){
2 this.name = name;
3 this.age = age;
4 this.speak = speak;
5 }
6 function speak(){
7 warning(this.name + "is " + this.age + "years old");
8 }
9 var person1 = new Person( "Sam" , 16);
10 var person2 = new Person("Jack", 18);
11 warning(person1.speak == person2.speak); // true

Das Problem ist gelöst, aber diese Methode bringt neue Probleme mit sich. Erstens wird die Funktion speak im globalen Bereich deklariert, kann aber nur im Person-Konstruktor verwendet werden. Zweitens besteht die Gefahr eines Missbrauchs, wenn ein benutzerdefinierter Typ über viele Methoden verfügt Deklarieren Sie viele globale Funktionen, was nicht nur zu einer Verschmutzung des globalen Bereichs führt, sondern auch der Codekapselung nicht förderlich ist. Gibt es also eine Möglichkeit, eine benutzerdefinierte Typmethode an eine Klasse zu binden, ohne den globalen Gültigkeitsbereich zu beeinträchtigen? Die Antwort besteht darin, ein Prototypmuster zu verwenden.
4. Prototypenmodus. Nachdem wir eine neue Funktion deklariert haben, verfügt die Funktion (in JavaScript sind Funktionen auch Objekte) über ein Prototypattribut. Ein Prototyp ist ein Objekt, das die öffentlichen Eigenschaften und Methoden aller von dieser Funktion erstellten Objekte darstellt. Der Beispielcode lautet wie folgt:

1 function Person(){}
2 Person.prototype.name="Sam";
3 Person.prototype.age=16;
4 Person.prototype.speak = function(){
5 warning(this.name + "is " + this.age + "years old");
6 }
7 var person1 = new Person() ;
8 person1.speak();
9 var person2 = new Person();
10 warning(person1.speak == person2.speak); // true

Sie können sehen, dass die Speak-Methode zwar nicht im Konstruktor deklariert ist, das von uns erstellte Objekt person1 jedoch immer noch die Speak-Methode aufrufen kann. Dies liegt daran, dass JavaScript zuerst nach Instanzeigenschaften und -methoden sucht und diese zurückgibt gefunden; wenn nicht gefunden, wird „Suche im Prototyp“ zurückgegeben. Das Prototypmuster macht die Methode mit der Klasse verknüpft und verschmutzt nicht den globalen Bereich, weist jedoch auch seine eigenen Mängel auf: Erstens beziehen sich alle Eigenschaften auch auf die Klasse, was bedeutet, dass alle Objekte eine Eigenschaft gemeinsam nutzen, was offensichtlich unvernünftig ist ; Zweitens gibt es keine Möglichkeit, Initialisierungsdaten an den Konstruktor zu übergeben. Die Lösung ist einfach: Verwenden Sie einfach eine Mischung aus Konstruktormuster und Prototypmuster.
5. Kombinationsmodus. Der Beispielcode lautet wie folgt:

1 function Person(name, age){
2 this.name = name;
3 this.age = age;
4 }
5 Person.prototype.speak = function(){
6 warning(this.name + "is " + this.age + "years old");
7 }
8 var person1 = new Person( );
9 person1.speak();
10 var person2 = new Person();
11 warning(person1.speak == person2.speak); // true

Nein. Es ist schwer zu finden, dass das Kombinationsmodell alle unsere Bedürfnisse erfüllt, und es ist auch ein Modell, das derzeit weit verbreitet ist. Entwickler mit Erfahrung in der objektorientierten Programmierung finden es möglicherweise etwas umständlich, die Prototypdeklaration außerhalb des Konstruktors zu platzieren. Kann sie also in den Konstruktor eingefügt werden? Die Antwort lautet: Ja, verwenden Sie einfach den dynamischen Kombinationsmodus.
6. Dynamischer Kombinationsmodus. Das Prinzip besteht darin, zunächst festzustellen, ob ein bestimmtes Attribut oder eine bestimmte Methode im Prototyp deklariert wurde. Andernfalls wird der gesamte Prototyp deklariert. Der Beispielcode lautet wie folgt:

1 function Person(name, age){
2 this.name = name;
3 this.age = age;
4 if (Person. Prototyp.speak == "undefiniert"){
5 Person.prototype.speak = function(){
6 Alert(this.name + "is " + this.age + "years old") ;
7 }
8 }
9 }