Detaillierte Erläuterung des Objektmodellcodes für benutzerdefinierte JavaScript-Eigenschaften und -Methoden

In JavaScript gibt es viele Modi zum Erstellen eines Objekts mit benutzerdefinierten Eigenschaften und Methoden

1. Direkter Erstellungsmodus. 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:

var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak();

Wie Sie sehen können, wird oben ein Objekt vom Typ „Object“ erstellt und anschließend werden ihm die Attribute „name“ und „age“ sowie eine Speak-Methode hinzugefügt. 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 Fabrikmuster ist ein häufig verwendetes Entwurfsmuster in der Programmierung. Es kapselt hauptsächlich den Prozess der Objekterstellung. Der Beispielcode lautet wie folgt:

function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18);

Erstellen Sie nach Verwendung des Fabrikmusters denselben Typ von Objekten werden einfacher. 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:

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18);

Wie Sie sehen können, verwenden wir dies im Konstruktor, um Eigenschaften und Methoden hinzuzufügen. Worauf bezieht sich das also? 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.
alert(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:

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true

Das Problem ist gelöst, aber dieser Ansatz schafft neue Probleme. 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:

function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

Wie Sie sehen können, kann das von uns erstellte Objekt person1 die Speak-Methode dennoch aufrufen, obwohl die Speak-Methode nicht im Konstruktor deklariert ist JavaScript verfügt über eine Suchregel. Suchen Sie zunächst nach Instanzattributen und -methoden und suchen Sie erneut im Prototyp, wenn sie nicht gefunden werden. 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:

function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

Es ist nicht schwer herauszufinden, dass der Kombinationsmodus alle unsere Anforderungen erfüllt, und es ist auch ein Modus, der 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:

function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
}

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Objektmodellcodes für benutzerdefinierte JavaScript-Eigenschaften und -Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!