Explication détaillée des attributs prototypes en JavaScript (recommandé)

Dans un langage typique orienté objet, comme Java, il y a le concept de classe. La classe est le modèle d'un objet et un objet est une instance d'une classe. Cependant, dans le système de langue JavaScript, il n'y a pas de concept de classe. JavaScript n'est pas basé sur la «classe», mais est implémenté via des constructeurs et des chaînes prototypes. Cependant, ES6 fournit une méthode d'écriture plus proche des langues traditionnelles, introduisant le concept de classe (classe) comme modèle d'objet. Grâce au mot clé de la classe, vous pouvez définir une classe. Fondamentalement, la classe d'ES6 peut être considérée comme un simple sucre de syntaxe. La plupart de ses fonctions peuvent être obtenues par ES5. La nouvelle méthode d'écriture de classe ne fait que l'objet prototype écrit plus clair et plus comme la syntaxe de programmation orientée objet.

Selon mon habitude, je donnerai le répertoire de l'article avant de l'écrire.

Le contenu suivant sera divisé en sous-sections suivantes:

1. Une brève introduction aux constructeurs

2. Cons de constructeurs

3. Le rôle de l'attribut prototype

4. Chaîne prototype

5. Attribut de construction

5.1: Le rôle de l'attribut constructeur

6. Instruction OFFORATEUR

1. Une brève introduction aux constructeurs

Dans mon article sur la relation étroite entre les constructeurs et les nouvelles commandes en JavaScript, le concept et les caractéristiques des constructeurs, les principes et l'utilisation de nouvelles commandes, etc., sont introduits en détail. Si vous n'êtes pas familier avec les constructeurs, vous pouvez aller les savourer attentivement. Voici une simple revue.

Le soi-disant constructeur est une fonction qui fournit un modèle pour générer un objet et décrit la structure de base de l'objet. Un constructeur peut générer plusieurs objets, chacun avec la même structure. En général, un constructeur est un modèle pour un objet, et un objet est une instance d'un constructeur.

Les caractéristiques du constructeur sont:

R: La première lettre du nom de la fonction du constructeur doit être capitalisée.

B: Utilisez cet objet en interne pour pointer vers l'instance de l'objet à générer.

C: Utilisez le nouvel opérateur pour appeler le constructeur et renvoyer l'instance d'objet.

Voyons l'exemple le plus simple.

 fonction personne () {this.name = 'keith';} var boy = new personne (); console.log (boy.name); // 'keith'

2. Cons de constructeurs

Tous les objets d'instance peuvent hériter des propriétés et des méthodes du constructeur. Cependant, les propriétés ne peuvent pas être partagées entre les mêmes instances d'objet.

 Fonction Person (nom, hauteur) {this.name = name; this.height = hauteur; this.hobby = function () {return 'regarder les films';}} var boy = new personne ('keith', 180); var girl = new personne («Rascal», 153); console.log (boy.name); // keith 'console.log (girl.name); // Console «Rascal ».log (boy.hobby === girl.hobby); //FAUX

Dans le code ci-dessus, une personne constructeur génère deux instances d'objet Boy and Girl, et a deux propriétés et une méthode. Cependant, leur méthode de passe-temps est différente. C'est-à-dire que chaque fois que vous utilisez de nouveaux pour appeler le constructeur pour le remettre une instance d'objet, une méthode de passe-temps sera créée. Ce n'est ni nécessaire ni un gaspillage de ressources, car toutes les méthodes de passe-temps sont des comportements enfantins et peuvent être complètement partagés par deux instances d'objets.

Par conséquent, l'inconvénient des constructeurs est que les propriétés ou les méthodes ne peuvent pas être partagées entre les instances d'objet du même constructeur.

3. Le rôle de l'attribut prototype

Pour résoudre l'inconvénient de ne pas pouvoir partager des propriétés entre les instances d'objet de constructeurs, JS fournit des attributs de prototypes.

Chaque type de données dans JS est un objet (sauf null et non défini), et chaque objet hérite d'un autre objet, ce dernier est appelé objet "prototype", à l'exception de Null, qui n'a pas son propre objet prototype.

Toutes les propriétés et méthodes de l'objet Prototype seront partagées par l'instance d'objet.

Lorsqu'une instance d'objet est générée via un constructeur, le prototype de l'instance d'objet est pointé vers la propriété prototype du constructeur. Chaque constructeur a un attribut prototype, qui est l'objet prototype de l'instance d'objet.

 Fonction Person (nom, hauteur) {this.name = name; this.height = hauteur; } Personne.prototype.hobby = function () {return 'regarder des films'; } var boy = new personne ('keith', 180); var girl = new personne («Rascal», 153); console.log (boy.name); // keith 'console.log (girl.name); // Console «Rascal ».log (boy.hobby === girl.hobby); //vrai

Dans le code ci-dessus, si la méthode Hobby est placée sur l'objet Prototype, les deux objets d'instance partagent la même méthode. J'espère que tout le monde pourra comprendre que pour les constructeurs, le prototype est une propriété en tant que constructeur; Pour les instances d'objet, le prototype est un prototype d'objet des instances d'objet. Par conséquent, le prototype est une propriété et un objet.

Les objets prototypes ne sont pas des propriétés des instances d'objet. Les attributs d'une instance d'objet sont des attributs hérités de la définition du constructeur, car il existe un mot-clé à l'intérieur du constructeur pour pointer vers l'instance d'objet à générer. Les propriétés d'une instance d'objet sont en fait des attributs définis en interne par le constructeur. Tant que les propriétés et les méthodes de l'objet prototype sont modifiées, les modifications seront immédiatement reflétées dans toutes les instances d'objet.

 Personne.prototype.hobby = function () {return 'natation'; } console.log (boy.hobby === girl.hobby); // true console.log (boy.hobby ()); // 'natation'Console.log (girl.hobby ()); //'natation'

Dans le code ci-dessus, après avoir modifié la méthode Hobby de l'objet Prototype, les deux instances d'objet ont changé. En effet, les instances d'objet n'ont pas de méthodes de passe-temps, ce sont toutes des méthodes de passe-temps qui lisent les objets prototypes. C'est-à-dire que lorsqu'une instance d'objet n'a pas la propriété et la méthode, elle recherchera l'objet Prototype. Si l'objet d'instance lui-même a une certaine propriété ou méthode, il ne sera pas recherché sur l'objet Prototype.

 boy.hobby = function () {return 'jouer au basket'; } console.log (boy.hobby ()); // «jouer au basket» console.log (girl.hobby ()); //'natation'

Dans le code ci-dessus, lorsque la méthode de passe-temps de l'instance d'objet garçon est modifiée, la méthode de passe-temps sur l'objet prototype ne sera pas héritée. Cependant, la fille héritera toujours de la méthode de l'objet prototype.

Pour résumer:

R: La fonction d'un objet prototype est de définir les propriétés et les méthodes partagées par toutes les instances d'objet.

B: Prototype, pour les constructeurs, c'est une propriété; Pour les instances d'objet, il s'agit d'un objet prototype.

4. Prototype Chains

Les propriétés et les méthodes d'un objet peuvent être définies en soi ou dans son objet prototype. Étant donné que l'objet prototype lui-même est également un objet pour objet des instances et qu'il a également son propre prototype, une chaîne prototype est formée. Par exemple, l'objet A est le prototype de l'objet B, l'objet B est le prototype de l'objet C, etc. Le haut du prototype de tous les objets est l'objet.prototype, c'est-à-dire l'objet pointé par la propriété prototype du constructeur d'objets.

Bien sûr, l'objet Object.Prototype a également son propre objet prototype, c'est-à-dire un objet NULL sans aucun attribution et méthodes, et l'objet NULL n'a pas son propre prototype.

1 console.log (object.getPrototypeOf (object.prototype)); //nul

2 console.log (personne.prototype.isprototypeof (garçon)) // true

Les caractéristiques des chaînes prototypes sont:

R: Lors de la lecture d'une certaine propriété d'un objet, le moteur JavaScript recherche d'abord la propriété de l'objet lui-même. S'il ne peut être trouvé, il ira à son prototype. S'il ne peut toujours être trouvé, il ira au prototype du prototype. Si l'objet.prototype au niveau supérieur n'est toujours pas trouvé, un non-défini est renvoyé.

B: Si l'objet lui-même et son prototype définissent un attribut du même nom, alors les attributs de l'objet lui-même sont lus en premier, qui s'appelle "Overriding".

C: La recherche d'un certain attribut dans le niveau de chaîne prototype à la hausse a un impact sur les performances. Plus le niveau de l'objet prototype que vous recherchez est élevé, plus l'impact sur les performances est élevé. Si vous recherchez une propriété inexistante, elle traversera toute la chaîne prototype.

Il peut être obscur de regarder le concept, prenons un exemple. Mais il est vraiment important de comprendre le concept.

 var arr = [1,2,3]; console.log (arr.length); //3Console.log (arr.valueof ()) // [1,2,3] console.log (arr.join ('|')) // 1 | 2 | 3

Dans le code ci-dessus, un tableau ARR est défini, avec trois éléments dans le tableau. Nous n'avons ajouté aucun attribution ou méthodes au tableau, mais nous n'avons pas signalé d'erreur lors de l'appel de la longueur, de la jointure () et de la valeur de ().

L'attribut de longueur est hérité de l'array.prototype et appartient à une propriété sur l'objet Prototype. La méthode de jointure est également héritée de l'array.prototype et appartient à une méthode sur l'objet prototype. Ces deux méthodes sont partagées par tous les tableaux. Lorsqu'il n'y a pas d'attribut de longueur sur l'objet d'instance, l'objet Prototype sera recherché.

La valeur de la méthode est héritée de object.prototype. Tout d'abord, le tableau ARR n'a pas de valeur de valeur, alors recherchez le prototype d'objet Array.prototype. Ensuite, j'ai trouvé qu'il n'y a pas de méthode de valeur sur l'objet array.prototype. Enfin, recherchez l'objet objet.prototype.

Jetons un coup d'œil aux propriétés et aux méthodes de l'objet Array.Prototype et de l'objet Object.Protype respectivement.

 console.log (object.getownpropertyNames (array.prototype)) // ["", "," tosource "," toString "," tolocalestring "," join "," reverse "," tri "," push "," pop "," shift "," Unshift " "map", "filter", "reduceRight", "some", "every", "find", "findindex", "copywithin", "rempli", "entrées", "clés", "clés", "valeurs", "incluent", "constructeur", "$ set", "$ supprimer"] console.log (object.getropertyNames (object.pototype) / ["object.getPropertyNames (object.pototype) /" "object.getPropertyNames (object.pototype) "TOSTRING", "Tolocalestring", "ValueOf", "Watch", "Unwatch", "Hasownproperty", "isprototypeOf", "PropertyiSenumable", "__definegetter__", "__defineSetter__", "__lookupgetter__"]

Je crois que lorsque vous voyez cela, vous avez toujours une très légère compréhension du prototype. C'est normal. Après tout, c'est un concept plus important et abstrait dans JS. Il est impossible de le maîtriser si rapidement. Si vous avez mangé quelques autres articles, vous pouvez maîtriser l'essence. D'une certaine manière, il y a un exemple vivant, qui peut également être un problème que tout le monde rencontrera. Vous pouvez jeter un œil à JS Constructor et Prototype Objets.

5. Attribut de construction

L'objet Prototype a un attribut constructeur qui pointe vers la fonction du constructeur où l'objet prototype est situé par défaut.

 fonction a () {}; console.log (a.prototype.constructor === a) // true

Il convient de noter que le prototype est la propriété du constructeur, et le constructeur est l'objet indiqué par la propriété prototype du constructeur, c'est-à-dire la propriété de l'objet prototype. Faites attention à ne pas confondre.

 console.log (a.hasownproperty («prototype»)); // true console.log (a.prototype.hasownproperty ('constructeur')); //vrai

Étant donné que l'attribut constructeur est défini sur l'objet Prototype, cela signifie qu'il peut être hérité par tous les objets d'instance.

 fonction a () {}; var a = new a (); Console.log (A. Constructor); //A()console.log(a.constructor===a.prototype.constructor) ;//true

Dans le code ci-dessus, A est un objet d'instance du constructeur A, mais A lui-même n'a pas d'attribut de constructeur, qui lit en fait la chaîne prototype.

A. PROTOTYPE.CONSTRUCTEUR PROPRIÉTÉ.

5.1: Le rôle de l'attribut constructeur

R: Déterminer quelle fonction constructeur est l'objet prototype appartenant

 fonction a () {}; var a = new a (); console.log (A.Constructor === a) // true console.log (A.Constructor === Array) // False

Le code ci-dessus signifie que l'utilisation de la propriété du constructeur, il est déterminé que la fonction du constructeur de l'objet d'instance a est un tableau non.

B: créer une autre instance à partir de l'instance

 fonction a () {}; var a = new a (); var b = new A.Constructor (); console.log (b instance de a); //vrai

Dans le code ci-dessus, A est un objet d'instance du constructeur A, et le constructeur peut être indirectement appelé depuis A.Contructor.

C: Il est possible d'appeler son propre constructeur

 A.prototype.hello = function () {return new this.constructor (); }

D: fournit un modèle d'héritage d'un autre constructeur d'un constructeur

 fonction père () {} fonction fils () {Son.Height.Constructor.Call (this); } Son.Height = new Father ();

Dans le code ci-dessus, le père et le fils sont tous deux constructeurs. Appeler père sur ce fils intérieur formera l'effet du fils héritant de Père.

E: Étant donné que l'attribut de constructeur est une relation entre un objet prototype et un constructeur, lors de la modification de l'objet prototype, vous devez prêter attention au problème de pointage du constructeur.

Il existe deux solutions: pointez l'attribut de constructeur à la fonction du constructeur d'origine, soit ajoutez simplement des propriétés et des méthodes à l'objet prototype pour éviter la distorsion de l'instance.

6. Instruction OFFORATEUR

L'opérateur d'instance de renvoie une valeur booléenne indiquant si l'objet spécifié est une instance d'un constructeur.

 fonction a () {}; var a = new a (); console.log (a instanceof a); //vrai

Étant donné que l'instance OFF est valide pour les objets sur l'ensemble de la chaîne prototype, le même objet d'instance peut retourner vrai pour plusieurs constructeurs.

 fonction a () {}; var a = new a (); console.log (une instance de a); //trueconsole.log(a instance Of objet); //vrai

Notez que les objets d'instance OFF ne peuvent être utilisés que pour des types de données complexes (tableaux, objets, etc.) et ne peuvent pas être utilisés pour des types de données simples (valeurs booléennes, nombres, chaînes, etc.).

 var x = [1]; var o = {}; var b = true; var c = 'string'; Console.log (x instance de tableau); //trueconSole.log(O instance Off objet); // true console.log (b instanceof booléen); //falseconsole.log(c instance de chaîne); //FAUX

De plus, ni null ni non défini ne sont des objets, donc l'instance de renvoie toujours fausse.

 console.log (objet null instanceOf); // false console.log (instance non défini objet); //FAUX

En utilisant l'opérateur d'instance OFF, vous pouvez également résoudre intelligemment le problème de l'oubli d'ajouter une nouvelle commande lors de l'appel du constructeur.

 fonction keith (name, height) {if (! Cette instance de keith) {return new Keith (name, height); } this.name = name; this.height = hauteur;}

Dans le code ci-dessus, l'opérateur d'instance OFF est utilisé pour déterminer si le mot clé dans le corps de fonction pointe vers une instance du constructeur Keith. Sinon, cela signifie que la nouvelle commande est oubliée. À l'heure actuelle, le constructeur renverra une instance d'objet pour éviter les résultats inattendus.

En raison des limitations de l'espace, je le présenterai ici pour le moment.

Dans ma prochaine part, je parlerai de certaines méthodes natives d'objets prototypes, tels que object.getPrototypeOf (), object.setprototypeof (), etc., et introduire une comparaison des méthodes pour obtenir des objets natifs.

Ce qui précède est l'explication détaillée de l'attribut prototype (recommandé) dans JavaScript qui vous a présenté par l'éditeur. J'espère que cela vous sera utile.