Einführung in JavaScript-Entwurfsmuster und Prototypmuster (Object.create und Prototyp)

Beschreibung des Prototypmodus

Beschreibung: Verwenden Sie Prototypinstanzen, um neue anpassbare Objekte zu kopieren und zu erstellen. Für neue Objekte müssen Sie den spezifischen Prozess zum Erstellen des Originalobjekts nicht kennen

Prozess: Prototyp => neues ProtoExam => auf neues Objekt klonen;

Verwenden Sie den entsprechenden Code:

Code kopieren Der Code lautet wie folgt:

Funktion Prototype() {
This.name = '';
This.age = '';
This.sex = '';
}
Prototype.prototype.userInfo = function() {

Return 'Persönliche Informationen, Name: ' this.name ', Alter: ' this.age ', Geschlecht: ' this.sex '
';
}

Zwei oder mehr persönliche Informationsinhalte sind jetzt erforderlich:

Code kopieren Der Code lautet wie folgt:

var proto = new Prototype();

var person1 = Object.create(proto);

person1.name = 'Xiao Ming';

person1.sex = 'Male';

person1.age = 35;

person1.userInfo(); 

//

var person2 = Object.create(proto);

person2.name = 'Xiaohua';

person2.sex = 'Weiblich';

person2.age = 33;

person2.userInfo();

Ausgaberückgabe:

Code kopieren Der Code lautet wie folgt:

Persönliche Informationen, Name: Xiao Ming, Alter: 35, Geschlecht: Männlich

Persönliche Informationen, Name: Xiaohua, Alter: 33, Geschlecht: Weiblich

Der Prototypenmodus wird im Allgemeinen verwendet, wenn die abstrakte Struktur komplex ist, die Inhaltszusammensetzung jedoch ähnlich ist, der abstrakte Inhalt angepasst werden kann und das neu erstellte Objekt nur geringfügig geändert werden muss, um die Anforderungen zu erfüllen

Object.create-Anweisungen

1>. Definition: Erstellen Sie ein Objekt, das ein Prototypobjekt angeben und optionale benutzerdefinierte Eigenschaften enthalten kann 2> Object.create(proto [, Properties]); Optional, wird zum Konfigurieren der Eigenschaften des neuen Objekts verwendet;

Code kopieren Der Code lautet wie folgt: 1. proto: Um einen Prototyp eines neuen Objekts zu erstellen, ist es erforderlich und kann null sein; dieses proto ist nur dann wertvoll, wenn es bereits erstellt wurde [new] oder object.prototype; 2. Eigenschaften: optional, Struktur:

{

propField: {
              Wert: 'val'|{}|function(){},
beschreibbar: wahr|falsch,
aufzählbar: wahr|falsch,
Konfigurierbar: true|false,
              get:function(){return 10},
             set:function(value){}
}
}
Benutzerdefinierte Attribute haben die folgenden vier nativen Attribute:
Wert: benutzerdefinierter Attributwert;
beschreibbar: Ob der Wert dieses Elements bearbeitet werden kann, der Standardwert ist „false“. Wenn er „true“ ist, kann obj.prodField ein Wert zugewiesen werden; andernfalls ist er schreibgeschützt; aufzählbar: aufzählbar;
konfigurierbar: konfigurierbar;

Kann auch Set- und Get-Accessor-Methoden enthalten;

Unter diesen können [set, get] und value und beschreibbar nicht gleichzeitig auftreten

1. Prototyp-Objektklasse erstellen:

Code kopieren

Der Code lautet wie folgt: Funktion ProtoClass(){ This.a = 'ProtoClass'; This.c = {};

This.b = function() {

}

}

Prototypmethode erstellen:

Code kopieren

Der Code lautet wie folgt: ProtoClass.prototype.aMethod = function() { //this.a; //this.b();

Geben Sie this.a;

zurück }

Anwendung

1. Erstellen Sie ein Objekt mit ProtoClass.prototype;

Code kopieren Der Code lautet wie folgt:

var obj1 = Object.create(ProtoClass.prototype, {

foo:{Wert: 'obj1', beschreibbar: wahr🎜>
})

obj1 verfügt über die ProtoClass-Prototypmethode aMethod;

Code kopieren Der Code lautet wie folgt:

obj1.aMethod();

//Es wird undefiniert ausgegeben, die Methode ist zugänglich und die ProtoClass-Mitglieder sind nicht zugänglich

Diese Methode kann jedoch die Mitgliedsattribute von a, b, c unter ProtoClass:
nicht implementieren

2. Verwenden Sie die instanziierte ProtoClass als Prototyp:

Code kopieren Der Code lautet wie folgt:

var proto = new ProtoClass();
var obj2 = Object.create(proto, {

foo:{value:'obj2'}
});

Das auf diese Weise erstellte obj2 verfügt über alle Mitgliedsattribute a, b, c und eine Methodenprototypmethode von ProtoClass und fügt ein schreibgeschütztes Datenattribut foo hinzu

Code kopieren Der Code lautet wie folgt:

obj2.a; //ProtoClass

obj2.c: //[Objekt]
obj2.b(); //

obj2.aMethod(); //ProtoClass obj2.foo; //obj2

3. Unterklassenvererbung:

Code kopieren Der Code lautet wie folgt:

Funktion SubClass() {

}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
foo:{value: 'subclass'}
});

SubClass.prototype.subMethod = function() { Geben Sie this.a || zurück. this.foo;

}

Diese Methode kann an die aMethod-Methode von ProtoClass geerbt und ausgeführt werden;

Code kopieren Der Code lautet wie folgt:

var func = new SubClass();

func.aMethod() ;//undefiniert, kann die Mitgliedsattribute von ProtoClass, a, b, c
 nicht lesen
func.subMethod();//subclass

Damit SubClass die Mitgliedsattribute von ProtoClass lesen kann, muss SubClass geändert werden:

Code kopieren Der Code lautet wie folgt:

Funktion SubClass()

{
ProtoClass.call(this);
}

//Andere Codes;

Diese Methode kann die Mitgliedsattribute und Prototypmethoden von ProtoClass;: abrufen

Code kopieren Der Code lautet wie folgt:

var func = new SubClass();

func.aMethod() ;//ProtoClass

func.subMethod();//ProtoClass

Eine andere Methode besteht darin, ein instanziiertes ProtoClass-Objekt als Prototyp der SubClass zu verwenden;

Code kopieren Der Code lautet wie folgt:

var proto = new ProtoClass();

Funktion SubClass() { }

SubClass.prototype = Object.create(proto, {

foo:{value: 'subclass'}

});

Auf diese Weise können Sie nach der Instanziierung von SubClass alle Eigenschaften und Prototypmethoden von ProtoClass abrufen und ein schreibgeschütztes Datenattribut foo erstellen;

Code kopieren Der Code lautet wie folgt:

var func = new SubClass();

func.foo; //Unterklasse
func.a; //ProtoClass
func.b(); //
func.c; //[Objekt]
func.aMethod(); //ProtoClass

4. Eine andere Erstellungsvererbungsmethode hat den gleichen Effekt wie Object.create unter Verwendung der instanziierten ProtoClass als Prototyp:

Code kopieren Der Code lautet wie folgt:

Funktion SubClass() {
this.foo = 'subclass'; //Aber es kann hier gelesen und geschrieben werden
}

SubClass.prototype = new ProtoClass();

Object.create-bezogene Anweisungen

Object.create wird zum Erstellen eines neuen Objekts verwendet. Wenn es sich um ein Objekt handelt, ist der Prototyp null und die Funktion ist dieselbe wie new Object(); oder {};

Wenn es sich um eine Funktion handelt, hat sie die gleiche Wirkung wie new FunctionName;

Code kopieren Der Code lautet wie folgt:

//1 Objekt
var o = {}
//Entspricht
var o2 = Object.create({});
//Beide Konstruktoren sind gleich;

//--------------------------
Funktion func() {
This.a = 'func';
}
func.prototype.method = function() {
Geben Sie this.a;
zurück }

Aber newfunc und newfunc2 haben unterschiedliche Funktionsreferenzen in den Objekten, die sie erstellen.

newfunc ist die Funktion func() {...}, newfunc2 ist die Funktion Function {Native}

Code kopieren Der Code lautet wie folgt:

Object.create(proto[, PropertiesField]):

Proto-Beschreibung, dieser Wert ist erforderlich und kann null sein. Wenn er nicht festgelegt ist, wird eine Ausnahme ausgelöst Wenn proto nicht null ist, handelt es sich um einen instanziierten Wert, d. h. einen neuen Wert; die meisten Objekte in JavaScript haben ein Konstruktorattribut, das angibt, durch welche Funktion dieses Objekt instanziiert wird;

propertiesField ist optional und legt die Mitgliedseigenschaften oder Methoden fest, die das neu erstellte Objekt möglicherweise benötigt;