Résumé du schéma de la création d'objets en javascript

Résumé du schéma de la création d'objets en javascript

** javascript crée un motif d'objet:

Objet littéral

Modèle d'usine

Mode constructeur

Mode prototype

Combinaison du constructeur et du motif prototype

Mode dynamique prototype

**

La plupart des langues orientées objet ont le concept d'une classe, à travers laquelle plusieurs objets avec les mêmes méthodes et attributs peuvent être créés. Bien que techniquement, JavaScript soit un langage orienté objet, JavaScript n'a pas le concept de classes, tout est un objet. Tout objet est une instance d'un certain type de référence et est créé via des types de référence existants; Le type de référence peut être natif ou personnalisé.

1. Objet littéral

 var personne = {nom: 'Nicholas'; Âge: «22»; Emploi: "ingénieur logiciel" Selon Name: function () {alter (this.name); }}

Dans l'exemple, un objet nommé est créé et trois attributs (nom, âge, travail) et une méthode (SayName ()) y sont ajoutés. La méthode SayName () est utilisée pour afficher la valeur de ce.name (résolue comme personne.name).

Les littéraux d'objet peuvent être utilisés pour créer un seul objet, mais cette méthode présente un inconvénient évident: la création de nombreux objets utilisant la même interface produira beaucoup de code en double.

2. Modèle d'usine

Le modèle d'usine est un modèle de conception bien connu dans le domaine de l'ingénierie logicielle. Le modèle d'usine résume le processus de création d'objets spécifiques et utilise des fonctions pour encapsuler les détails de la création d'objets avec des interfaces spécifiques.

 fonction créeperson (nom, âge, travail) {var o = nouvel objet {}; o.name = name; O.age = âge; O.Job = Job; o.sayName = function () {alert (this.name); }; return o;} var person1 = createSerson ("Nicholas", 22, "Software Engineer"); var person2 = CreatPerson ("Greg", 24, "Student");

La fonction CreateSerson {} peut construire un objet de personne contenant toutes les informations nécessaires en fonction des paramètres acceptés. Cette fonction peut être appelée d'innombrables fois, et chaque fois, il renverra un objet contenant trois propriétés et une méthode.

Bien que le modèle d'usine résout le problème de la création de plusieurs objets similaires, il ne résout pas le problème de la reconnaissance des objets (c'est-à-dire comment connaître le type d'objet).

3. Mode constructeur

 Personne de fonction (nom, âge, travail) {this.name = name; this.age = âge; this.job = job; this.sayName = function () {alert (this.name); }} // Créer une instance de personne via le nouvel opérateur var person1 = new Person ("Nicholas", 22, "Software Engineer"); var Person2 = new Person ("Greg", 24, "Student"); Person1.SayName (); //Nicholaspherson2.sayName (); // Greg

La différence par rapport au modèle d'usine est

Créer un objet non affiché

Attribuer des attributs et des méthodes directement à cet objet

Aucune déclaration de retour

Pour créer une nouvelle instance de personne, vous devez utiliser le nouvel opérateur. 4 étapes pour appeler le constructeur:

Créer un nouvel objet

Attribuez la portée du constructeur à un nouvel objet (cela pointe vers ce nouvel objet)

Exécuter le code dans le constructeur

Renvoyer un nouvel objet

Tous les objets créés dans cet exemple sont à la fois des instances d'instances d'objets et de personne. Il peut être vérifié par l'instance de l'opérateur.

 alert (Person1 instanceof objet); // true

Le modèle de constructeur a également ses propres problèmes. En fait, la méthode SayName sera recréée une fois sur chaque instance. Il convient de noter que les méthodes créées par instanciation ne sont pas égales. Le code suivant peut prouver que

 alert (Person1.sayName == Person2.sayName); // faux

Ce problème peut être résolu en déplaçant la méthode en dehors du constructeur en tant que fonction globale.

 Personne de fonction (nom, âge, travail) {this.name = name; this.age = âge; this.job = job; } fonction saitName () {alert (this.name); }

Les fonctions mondiales créées dans le monde mondial peuvent en fait être appelées par des instances créées par la personne, ce qui est un peu irréaliste; Si l'objet doit définir une méthode très correcte, de nombreuses fonctions globales doivent être définies, ce qui manque d'encapsulation.

4. Mode prototype

Chaque fonction créée dans JavaScript a une propriété prototype, qui est un pointeur vers un objet, contenant des propriétés et des méthodes qui peuvent être partagées par tous les instances d'un type spécifique (laissez tous les instances d'objet partager ses propriétés et ses méthodes)

 fonction personne () {} personne.prototype.name = "Nicholas"; Personne.prototype.age = 22; Personne.prototype.job = "ingénieur logiciel"; Personne.prototype.sayName () {alert (this.name); }; var person1 = new personne (); personne1.sayName (); //Nicholasalerert(Person1.SayName == Person2.sayName); // Vrai

Le code ci-dessus fait ces choses:

Définir une personne constructeur. La fonction de personne obtient automatiquement une propriété prototype. Cette propriété ne contient qu'une propriété de constructeur pointant vers la personne par défaut.

Ajouter trois propriétés et une méthode via Person.prototype

Créez une instance de personne, puis appelez la méthode SayName () sur l'instance

Utilisation du constructeur de personne et personne.prototype pour créer une instance comme exemple, pour afficher la relation entre les objets

Utilisation du constructeur de personne et personne.prototype pour créer une instance comme exemple, pour afficher la relation entre les objets

La figure montre la relation entre le constructeur de la personne, les propriétés prototypes de la personne et deux instances de personne. Person.prototype pointe vers l'objet Prototype, Person.prototype.Constructor repose à la personne. En plus de contenir l'attribut constructeur, l'objet prototype contient également d'autres propriétés et méthodes ajoutées plus tard. Les deux instances de la personne Person1 et Person2 contiennent une propriété interne, qui ne pointe que le prototype personne.

Le processus d'appel de la méthode SayName ():

À la recherche de la méthode Logname () sur l'instance Person1, j'ai constaté qu'il n'y avait pas de méthode de ce type, alors je suis retourné au prototype de Person1

Recherchez la méthode sayame () sur le prototype de Person1. Il y a cette méthode, donc la méthode est appelée

Sur la base d'un tel processus de recherche, nous pouvons empêcher l'instance d'accéder à l'attribut de même nom sur le prototype en définissant l'attribut de même nom dans le prototype de l'instance. Il convient de noter que cela ne supprimera pas l'attribut de même nom sur le prototype, mais empêchera uniquement l'instance d'accéder.

 fonction personne () {} personne.prototype.name = "Nicholas"; Personne.prototype.age = 22; Personne.prototype.job = "ingénieur logiciel"; Personne.prototype.sayName () {alert (this.name); }; var person1 = new personne (); var person2 = new personne (); person1.name = "greg" alert (Person1.name) // Greg vient de l'alerte d'instance (personne2.name) // Nicholas vient du prototype

Utilisez l'opérateur de suppression pour supprimer complètement les propriétés d'instance

 supprimer personne1.name; alert (personne1.name) // Nicholas du prototype

Utilisez la méthode HasownProperty () pour détecter si une propriété existe dans un cas ou un prototype

 fonction personne () {} personne.prototype.name = "Nicholas"; Personne.prototype.age = 22; Personne.prototype.job = "ingénieur logiciel"; Personne.prototype.sayName () {alert (this.name); }; var person1 = new personne (); var person2 = new personne (); alert (Person1, HasownProperty ("name")); // false person1.name = "greg" alert (person1.name) // greg from the instance alert (Person1, Hasownproperty ("name")); // trueeert (Person2.name) // nicholas) de l'alerte de procure Person1.name; alert (Person1.name) // Nicholas de l'alerte prototype (Person1, Hasownproperty ("nom")); // false

La figure suivante montre la relation entre les instances et les prototypes dans différentes situations

Syntaxe prototype simple

 fonction personne () {} personne.prototype = {nom: "Nicholas", âge: 22, travail: "ingénieur logiciel", SayName: function () {alert (this.name); }};

Dans le code ci-dessus, l'attribut de constructeur ne pointe plus à la personne, et le type de l'objet ne peut pas être déterminé via le constructeur. Vous pouvez le remettre à la valeur appropriée comme ci-dessous

 fonction personne () {} personne.prototype = {constructeur: personne, nom: "Nicholas", âge: 22, travail: "ingénieur logiciel", SayName: function () {alert (this.name); }};

La réinitialisation de la propriété du constructeur entraînera la définition de sa propriété [[énumérable]]. Par défaut, la propriété du constructeur natif n'est pas énumérable. Vous pouvez utiliser la méthode object.defineProperty () pour la modifier.

 Object.defineProperty (personne.prototype, "constructeur", {énumérable: false, valeur: personne});

Le processus de recherche de valeurs dans un prototype est une recherche, et toutes les modifications apportées par l'objet prototype peuvent être réfléchies immédiatement à partir de l'instance.

 var ami = new personne (); personne.prototype.sayhi = function () {alert ("hi);} ami, sayhi (); //" hi "(pas de problème)

L'instance de personne est créée avant d'ajouter une nouvelle méthode, mais a toujours accès à la méthode nouvellement ajoutée en raison de la connexion lâche entre l'instance et le prototype

La situation après réécriture de l'objet prototype

 fonction personne () {} var ami = new personne (); Personne.prototype = {nom: "Nicholas", âge: 22, travail: "ingénieur logiciel", SayName: function () {alert (this.name); }}; Friend.sayName (); // Erreur

La raison de l'erreur lors de l'appel Friend.SayName () est que le prototype pointé par un ami ne contient pas d'attributs nommés d'après ce champ, comme le montre la figure ci-dessous.

Problème d'objet prototype

L'objet Prototype omet le processus de passage des paramètres d'initialisation pour le constructeur, et toutes les forces obtiennent la même valeur d'attribut par défaut. Le plus gros problème avec les modèles de prototypes est qu'ils ont leur nature partagée. Lorsque le modèle de prototype contient des attributs de type de référence, le problème est plus grave. Jetons un coup d'œil à l'exemple suivant.

 function Person () {} personne.prototype = {constructeur: personne, nom: "Nicholas", âge: 22, travail: "ingénieur logiciel", amis: ["Shelby", "Court"], SayName: function () {alert (this.name); }}; var person1 = new personne (); var person2 = new personne (); Person1.friend.push ("Van"); alert (Person1.friends); // "Shelby, Court, Van" Alert (Person2.friends); // "Shelby, Court, Van" Alert (Person1.friends == Person2.friends); // vrai

5. Combinaison du mode constructeur et du mode prototype

En combinaison du mode constructeur et du mode prototype, les constructeurs sont utilisés pour définir les propriétés d'instance, et des modèles de prototypes sont utilisés pour définir des méthodes et des propriétés partagées. De cette façon, chaque instance aura sa propre copie des attributs d'instance et peut également partager des références aux méthodes, enregistrant la mémoire dans la mesure maximale.

 Personne de fonction (nom, âge, travail) {this.name = name; this.age = âge; this.job = job; this.friends = ["shelby", "cour"];} personne.prototype = {constructeur: personne, SayName: function () {alert (this.name); }} var person1 = new personne ("Nicholas", 22, "ingénieur logiciel"); var person2 = new personne ("greg", 24, "étudiant"); personne1.friend.push ("van"); alert (Person1.friends); // "Shelby, Court, Van" Alert (Person2.friends); // "Shelby, Court" Alert (Person1.friends == Person2.friends); // False Alert (Person1.SayName == Person2.SayName); // vrai

6. Mode prototype dynamique

Le mode dynamique prototype résume toutes les informations requises dans le constructeur et utilise l'instruction IF pour déterminer s'il existe une certaine propriété dans le prototype. S'il n'existe pas (lorsque le constructeur est appelé pour la première fois), exécutez le code d'initialisation du prototype à l'intérieur de l'instruction if.

 Fonction Person (nom, âge) {this.name = name; this.age = âge; this.job = job; // méthode if (typeof this.sayName! = 'function') {personne.prototype.sayName = function () {alert (this.name); }; }} var ami = new personne ('Nicholas', '22', 'Software Engineer'); // Le constructeur a été appelé pour la première fois, et le prototype a été modifié à l'heure

Lecture recommandée:

Plusieurs façons courantes de créer des objets dans JS orienté objet (mode d'usine, mode constructeur, mode prototype)

Ce qui précède est le modèle de création d'objets dans JavaScript qui vous est présenté par l'éditeur. J'espère que ce sera utile à tous!