JavaScript-Fabrikmuster, Prototypmuster, Konstruktormuster

1. Was ist ein Muster? Ein Muster ist eine wiederverwendbare Lösung, während ein Anti-Muster eine schlechte Lösung für ein bestimmtes Problem ist.

Häufige Beispiele für js-Anti-Muster

① Die Übergabe von Zeichenfolgen an setTimeout und setInterval anstelle von Funktionen löst die interne Verwendung von eval() aus.
② Definieren Sie eine große Anzahl von Variablen im globalen Kontext, um den globalen Namespace zu verschmutzen.
③ Ändern Sie den Prototyp der Object-Klasse.
④ In HTML-Dateien eingebetteter JS-Code kann nicht eingebunden werden Externe Unit-Tests in Tools.

⑤Wenn document.write nach dem Laden der Seite ausgeführt wird, wird die Seite, auf der wir uns befinden, neu geschrieben. Wenn Sie stattdessen document.creatElement verwenden können, versuchen Sie, document nicht zu verwenden. schreiben.

2. Kategorien von Entwurfsmustern

(1) Fabrikmuster (einfach und komplex)

Einfach ausgedrückt handelt es sich um gekapselten Code, eine einfache Fabrik. Das Muster ist einfach Seine Funktion besteht darin, objektorientierte Methoden zu verwenden, um einige Objekte und einige sich wiederholende Codes zu kapseln, die viel Platz beanspruchen. Die Implementierungsmethode ist sehr einfach: Erstellen Sie ein Objekt innerhalb der Funktion, weisen Sie dem Objekt Attribute und Methoden zu und geben Sie dann das Objekt zurück. Diese Methode soll das Problem einer großen Anzahl von Duplikaten instanziierter Objekte lösen.

	function creatper(name,age){  
		var per=new Object(); //原料
		//加工
		per.name=name;
		per.age=age;  
		per.sayHi=function(){
		  	console.log(per.name+'已经有'+per.age+"岁");  
		}
		return per; //出厂
	}
	var test1=creatper('lili',22);
	var test2 =creatper('mike',25);//第二个实例
	test1.sayHi();
	test2.sayHi();
	console.log(test1.name);

Es ist ersichtlich, dass Sie dies im Fabrikmodus wiederholt pro Funktion aufrufen können, um Objekte mit unterschiedlichen Attributwerten zu generieren. Dies ähnelt einer Fabrik, der Massenproduktion, den Rohstoffen, der Verarbeitung usw. und Lieferung sind alle sehr klar. Sie werden jedoch feststellen, dass das Factory-Muster den Objekttyp nicht identifizieren kann, da es sich im Gegensatz zu Datum, Array usw. alle um Objekte handelt.

Wann sollte das Fabrikmuster verwendet werden?
Der Werksmodus wird hauptsächlich in den folgenden Szenarien verwendet:
①Wenn Objekte oder Komponenten eine hohe Komplexität aufweisen
②Wenn es erforderlich ist, problemlos verschiedene Instanzen von Objekten entsprechend unterschiedlichen Umgebungen zu generieren

③Beim Umgang mit vielen kleinen Objekten oder Komponenten, die dieselben Eigenschaften haben

(2) Konstruktor (Konstruktor)-Muster

Konstruktor (Konstruktormethode) kann in ECMAScript verwendet werden, um ein bestimmtes Objekt zu erstellen. Dieser Modus kann lediglich das Problem lösen, dass der obige Werksmodus keine Objektinstanzen identifizieren kann.

	function Student(name,age,classa){//构造函数模式
        this.name = name;
        this.age = age;
        this.classa = classa;
        this.run = function () {
            console.log(this.name+ this.age+ "岁上"+this.classa +"！");
        }
    }
    var Benz = new Student('Lili',22,'初三');
    var BMW = new Student("Mike",25,"初一");
    console.log(Benz instanceof Student); //很清晰的识别他从属于Student
    Benz.run();
    BMW.run();

Wie aus dem Code ersichtlich ist, mit Ausnahme der unterschiedlichen Funktionsnamen im Factory-Modus, a. Die Konstruktormethode erstellt das Objekt nicht explizit (new Object()). ), b. Direkt Die Eigenschaften und Methoden werden diesem Objekt zugewiesen, c. Es gibt keine return-Anweisung. Kann Objekte erkennen (hier übertrifft das Konstruktormuster das Fabrikmuster) . Hinweis: Spezifikationen der Konstruktormethode: 1. Der Funktionsname und der Name des Instanziierungskonstruktors sind gleich und werden großgeschrieben. 2. Um ein Objekt über den Konstruktor zu erstellen, müssen Sie den neuen Operator verwenden.

Woher kommt dieses Objekt und wo wird new Object() ausgeführt, da Objekte über Konstruktoren erstellt werden können? Der Ausführungsprozess ist wie folgt:
1. Wenn der Konstruktor verwendet wird, wird new Object() im Hintergrund ausgeführt.
2 , (d. h. das von new Object() erstellte Objekt), und dies stellt im Funktionskörper das von new Object() erstellte Objekt dar.
3. Führen Sie den Code im Konstruktor aus

4.

(3). Prototypmuster

js legt fest, dass jede erstellte Funktion ein Prototypattribut hat, das auf ein Objekt zeigt, und den Zweck dieses Objekts enthält Eigenschaften und Methoden, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden. Durch die Verwendung eines Prototypobjekts können alle Instanzobjekte diese Eigenschaften und Methoden enthalten.

	function Per(){}
	Per.prototype.name='小米';
	Per.prototype.age=22;
	Per.prototype.course=['php','javascript','java','C#'];
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per();
	var per2=new Per();
	per1.name='小林';
	per1.course.push('Html5');
	per1.say();
	per2.say();
	per2.course.pop();

Was die Mängel des Prototypmusters angeht, ist es meiner Meinung nach offensichtlich, dass der Konstruktor die Übergabe von Initialisierungsparametern unterlässt Obwohl Sie später Änderungen vornehmen können, ist dies überhaupt nicht das größte Problem. Das größte Problem mit dem Prototypmuster liegt in der Art der Freigabe, da eine Instanz die Referenz und eine andere ändert wurden auch entsprechend geändert. Daher wird der Prototypenmodus im Allgemeinen nicht allein verwendet.

(4). Konstruktor mit Prototyp = Prototypmuster + Konstruktormuster

	function Per(name,age,course){
		this.name=name;
		this.age=age;
		this.course=course;
	}
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per('Make',22,['C#','java','PHP','Javascript']);
	var per2=new Per('小高',21,['oracle','mysql','nodejs','html5']);
	per1.say();//Make有22岁，学习了C#,java,PHP,Javascript等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。
	per1.course.pop();
	per1.say();//Make有22岁，学习了C#,java,PHP等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。

Analyse aus dem Obigen: Der Konstruktor wird zum Definieren der Attribute der Instanz verwendet, während das Prototypmuster zum Definieren verwendet wird Methoden und einige gemeinsame Eigenschaften. Jede Instanz verfügt über eigene Attribute, teilt jedoch gleichzeitig Methoden, wodurch maximal Speicherplatz gespart wird. Darüber hinaus unterstützt dieser Modus auch die Übergabe von Anfangsparametern. Am häufigsten verwendet.

Verwandte Empfehlungen:

Detaillierte Erläuterung des Prototypmodus des JS-Entwurfsmusters

Detaillierte Erläuterung des Befehlsmodus des JS-Entwurfsmusters

Detaillierte Erläuterung des Proxy-Musters von JS-Entwurfsmustern

Das obige ist der detaillierte Inhalt vonJavaScript-Fabrikmuster, Prototypmuster, Konstruktormuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!