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 (); // GregLa 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); // VraiLe 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 prototypeUtilisez 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")); // falseLa 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 (); // ErreurLa 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); // vrai5. 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); // vrai6. 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'heureLecture 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!