Brève analyse de la méthode de création d'objets JavaScript

1. Modèle d'usine

 Fonction Person (nom, âge) {var p = nouveau objet (); p.name = name; p.age = âge; p.showMessage = function () {console.log ("name:" + this.name + "Âge:" + this.age); } return p;} var p1 = personne ("k1", 28); var p2 = personne ("k2", 29); console.log (p1.showMessage == P2

Le défaut du modèle d'usine est que le problème de la reconnaissance de l'objet n'est pas résolu, et la méthode de showMessage de chaque objet n'est pas la même méthode (chaque méthode est recréée sur chaque instance d'objet), ce qui augmente la surcharge

2. Mode constructeur

 Fonction Person (nom, âge) {this.name = name; this.age = âge; this.showMessage = function () {console.log ("name:" + this.name + "Âge:" + this.age); }} var p1 = new personne ("k1", 28); var p2 = new personne ("k2", 29); console.log (p1.showMessage == P2

Le motif du constructeur résout le problème de la reconnaissance de l'objet, mais la méthode de showMessage de chaque objet n'est pas la même méthode (chaque méthode est recréée sur chaque instance d'objet), ce qui augmente la surcharge

3. Mode prototype

 fonction personne () {} personne.prototype.name = "k"; personne.prototype.age = 29; personne.prototype.showmesage = function () {console.log ("name:" + this.name + "Âge:" + this.age);}; var p1 = new Person (); p1.showmesage (); // name: k Age: 29Var P2 = Personne (); p2.showMessage (); // Nom: k Âge: 29Console.log (p1.showMessage == P2 console.log (personne.prototype.isprototypeof (p1)); // trueconsole.log (object.getprototypeof (p1) == personne.prototype); // true

Le motif de prototype résout le problème de "chaque méthode est recréée sur chaque instance d'objet" et résout également le problème de la reconnaissance de l'objet.

Un gros problème avec le mode prototype est que tous les objets, variables et fonctions montés sous le prototype de fonction sont partagés par toutes les instances de la fonction. Bien que les propriétés du prototype soient accessibles via les instances P1 et P2, la valeur de la propriété ne peut pas être modifiée. Par exemple, p1.name = "k1", il ajoute seulement une propriété de name = "k1" sur l'instance P1 et ne change pas à Prototype.name. C'est bien si c'est un type de valeur, mais s'il s'agit d'un type de référence, il y aura des problèmes. Voir l'exemple suivant

 fonction personne () {}; personne.prototype.age = 10; personne.prototype.array = [1,2,3]; var p1 = new Person (); var p2 = new Person (); console.log (p1.array); // [1,2,3] console.log (p2.array); //001,2,3.p1.array.push(4) ;console.log(p1.array) ;//[1,2,3,4.

P1 ajoute une valeur au tableau, qui se reflète également dans P2 car ils pointent tous vers le même tableau

4. Combinaison du mode constructeur et du mode prototype

C'est le moyen le plus courant de créer des objets, combinant les avantages des constructeurs et des motifs prototypes

 Fonction Person (nom, âge) {this.name = name; this.age = age;} personne.prototype.showMessage = function () {console.log ("name:" + this.name + "Âge:" + this.age);}; var p1 = new personne ("k", 30); p1.showMessage ();

5. Mode prototype dynamique

La solution principale est: encapsuler toutes les informations du constructeur, qui est plus conforme à l'idée de OO

 Fonction Person (nom, âge) {this.name = name; this.age = âge; if (typeof this.showMessage! = "function") {personne.prototype.showMessage = function () {console.log ("name:" + this.name + "Âge:" + this.age); }}} var p1 = new personne ("k", 30); p1.showMessage ();

6. Modèle de constructeur parasite

 Fonction Person (nom, âge) {var o = nouvel objet (); o.name = name; O.age = âge; o.sayName = function () {console.log (this.name); }; retour o;} var p1 = new personne ("k", 28); p1.sayName ();

Le modèle de constructeur parasite est exactement le même que le modèle d'usine, sauf que le nouveau mot-clé est utilisé lors de la création de l'objet. L'exemple ci-dessus: var p1 = nouvelle personne ("k", 28).

Sa fonction principale est: étendre les fonctions dans ce constructeur. Par exemple, je souhaite définir un type de tableau MyArray, qui est basé sur un tableau de tableau et a sa propre méthode, comme suit

 fonction myArray () {var valeurs = new Array (); valeurs.push.apply (valeurs, arguments); // la méthode définie par vous-même valeurs.topipedString = function () {return this.join ('|'); }; valeurs de retour;} var couleurs = new MyArray ("rouge", "bleu", "vert"); console.log (couleurs.topipedString ()); console.log (Couleurs d'instance de tableau);

7. Mode constructeur stable

Le constructeur sûr suit le modèle du type de constructeur parasite, mais il y a deux différences: l'une n'est pas pour l'utiliser, et l'autre n'est pas d'utiliser de nouvelles pour appeler le constructeur.

 Fonction Person (nom, âge) {var o = nouvel objet (); var tempage = âge; o.name = name; O.age = âge; o.sayName = function () {console.log (name); } o.sayage = function () {console.log (tempage); } return o;} var p1 = personne ("k1", 28); p1.sayName (); // k1p1.sayage (); // 28p1.name = "k2"; p1.age = 30; p1.sayName (); // k1p1.sayage (); // 28

Lorsque vous voyez la sortie ci-dessus, vous pouvez comprendre ce qu'est un modèle d'objet sûr. Il s'agit d'un objet créé en utilisant ce mode. Il n'y a aucun autre moyen de modifier la valeur transmise lors de l'initialisation. C'est Person ("K1", 28). Un tel objet est un objet sûr. En fait, c'est une fermeture de JavaScript.

La brève analyse ci-dessus de la méthode de création d'un objet JavaScript est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.