Modèle d'usine JavaScript, modèle de prototype, modèle de constructeur

1. Qu'est-ce qu'un modèle ? Un modèle est une solution réutilisable, tandis qu'un anti-modèle est une mauvaise solution à un certain problème.

Exemples courants d'anti-modèles js

① Passer des chaînes à setTimeout et setInterval au lieu de fonctions déclenchera l'utilisation interne de eval().
② Définir un grand nombre de variables dans le contexte global pour polluer l'espace de noms global
③ Modifier le prototype de la classe Object
④ Utiliser js sous forme en ligne Le code JS intégré dans les fichiers HTML ne peut pas être inclus dans. tests unitaires externes dans les outils.

⑤Abus de document.write. Si document.write est exécuté après le chargement de la page, il réécrira la page sur laquelle nous nous trouvons. Si vous pouvez utiliser document.createElement à la place, essayez de ne pas utiliser document. écrire.

2. Catégories de modèles de conception

(1). Modèle d'usine (simple et complexe)

En termes simples, c'est du code encapsulé, une usine simple Le modèle est facile. comprendre.Sa fonction est d'utiliser des méthodes orientées objet pour encapsuler certains objets et encapsuler certains codes répétitifs qui prennent beaucoup de place. La méthode d'implémentation est très simple, c'est-à-dire créer un objet dans la fonction, attribuer des attributs et des méthodes à l'objet, puis renvoyer l'objet. Cette méthode consiste à résoudre le problème d'un grand nombre de duplications d'objets instanciés .

	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);

On peut voir qu'en utilisant le mode usine, vous pouvez appeler cela à plusieurs reprises par fonction pour générer des objets avec différentes valeurs d'attribut. C'est comme une usine, la production de masse, les matières premières, la transformation, et la livraison sont toutes très claires. Mais vous constaterez que le modèle d'usine ne peut pas identifier le type d'objets, car ce sont tous des objets, contrairement à Date, Array, etc.

Quand utiliser le patron d'usine ?
Le mode Usine est principalement utilisé dans les scénarios suivants :
①Lorsque des objets ou des composants impliquent une grande complexité
②Lorsqu'il est nécessaire de générer facilement différentes instances d'objets selon différents environnements

③Lorsque vous traitez de nombreux petits objets ou composants partageant les mêmes propriétés

(2). Modèle de constructeur (constructeur)

Le constructeur (méthode constructeur) peut être utilisé dans ECMAScript pour créer un objet spécifique. Ce mode peut simplement résoudre le problème selon lequel le mode usine ci-dessus ne peut pas identifier les instances d'objet.

	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();

Comme le montre le code, à l'exception des différents noms de fonction en mode usine, a. La méthode constructeur ne crée pas explicitement l'objet (new Object() ), b. Directement Les propriétés et méthodes sont affectées à cet objet, c. Il n'y a pas d'instruction return. Capable de reconnaître des objets (c'est là que le modèle constructeur surpasse le modèle usine) . Remarque : Spécifications de la méthode constructeur : 1. Le nom de la fonction et le nom du constructeur d'instanciation sont identiques et en majuscules 2. Pour créer un objet via le constructeur, vous devez utiliser l'opérateur new.

Puisque les objets peuvent être créés via des constructeurs, d'où vient cet objet et où new Object() est-il exécuté ? Le processus d'exécution est le suivant :
1. Lorsque le constructeur est utilisé et que new constructor() est utilisé, new Object() est exécuté en arrière-plan
2. , (c'est-à-dire l'objet créé par new Object()), et ceci dans le corps de la fonction représente l'objet créé par new Object().
3. Exécutez le code dans le constructeur

4. Renvoyez le nouvel objet (retour directement en arrière-plan).

(3). Le modèle de prototype

js stipule que chaque fonction créée a un attribut de prototype. Cet attribut est un pointeur, pointant vers un objet, et le but de cet objet. contient des propriétés et des méthodes partagées par toutes les instances d'un type spécifique. L'utilisation d'un objet prototype permet à tous les objets d'instance de contenir ces propriétés et méthodes.

	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();

Concernant les défauts du modèle de prototype, je pense que c'est également évident. Il omet le constructeur pour transmettre les paramètres d'initialisation. Par conséquent, toutes les instances ont les mêmes attributs par défaut. , bien que vous puissiez apporter des modifications plus tard, ce n'est pas du tout pratique. Ce n'est pas le plus gros problème avec le modèle de prototype. En raison du partage, une instance modifie la référence et une autre les propriétés. ont également été modifiés en conséquence. Le mode prototype n’est donc généralement pas utilisé seul.

(4). Constructeur avec prototype = Modèle de prototype + Modèle de constructeur

	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 de ce qui précède : Le constructeur est utilisé pour définir les attributs de l'instance, tandis que le modèle de prototype est utilisé pour définir méthodes et certaines propriétés partagées. Chaque instance aura ses propres attributs, mais partagera en même temps des méthodes, économisant ainsi la mémoire au maximum. De plus, ce mode prend également en charge la transmission des paramètres initiaux. Le plus largement utilisé.

Recommandations associées :

Explication détaillée du mode prototype du modèle de conception JS

Explication détaillée du mode commande du modèle de conception JS

Explication détaillée du modèle de proxy des modèles de conception JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!