Analyse des prototypes en JavaScript [recommandé]

Récemment, lorsque j'apprenais JavaScript et que j'apprenais le prototype de JS orienté objet, j'ai beaucoup d'informations. S'il y a quelque chose qui ne va pas, j'espère que cela peut être corrigé.

En tant que langue orientée objet, JS a naturellement le concept d'hérédité, mais il n'y a pas de concept de classes en JS, il n'y a donc pas d'écart similaires à ceux de Java. Par conséquent, je pense que l'héritage en js dépend principalement des prototypes (chaînes) en js.

Alors, quel est le prototype? Nous savons que les fonctions dans JS sont également un objet. Lorsque nous créons une fonction, la fonction a en fait une propriété appelée prototype. Ce type de genre est appelé une propriété prototype. Il s'agit d'un pointeur qui pointe vers l'objet prototype de cette fonction. Cet objet prototype a une propriété par défaut appelée constructeur. Ce type de genre pointe vers une fonction qui a un type de prototype.

 fonction personne () {} personne.prototype = {// constructeur: personne; First_name: "guo", hair_color: "noir", ville: "zhengzhou", acte: function () {alert ("manger");}};

En prenant cela comme exemple, nous avons d'abord créé une personne de fonction. Cette fonction a un prototype d'attribut par défaut, pointant vers l'objet Person.propTtype. Cet objet a un constructeur d'attribut par défaut (), personne.prototype.constructor ---> personne. (En fait, la valeur par défaut ici est de pointer à l'objet, et la correction sera effectuée plus tard)

Que se passe-t-il lorsque nous créons une instance via un constructeur?

 function Person () {} personne.prototype = {first_name: "guo", hair_color: "noir", ville: "zhengzhou", acte: function () {alert ("manger");}}; var boy = new personne (); var girl = new personne ();

Pour le moment, nous devons savoir que la différence entre un constructeur et une fonction dans JS est le nouveau mot-clé, et une fonction qui utilise le nouvel opérateur est un constructeur. Lorsque nous créons l'objet d'instance de personne et l'enregistrons dans Boy, Girl, ces deux objets d'instance généreront un attribut par défaut appelé _proto_ (qui peut être représenté par [[Prototype]] dans ECMAScript5). Ce type de genre pointe vers l'objet prototype du constructeur, c'est-à-dire boy._proto _--> personne.prototype (n'a rien à voir avec le constructeur). À l'heure actuelle, un garçon ou une fille peut utiliser des points pour appeler le type de genre dans l'objet Prototype. Pour le moment, vous devez savoir que le garçon et la fille partagent le type de genre de l'objet Prototype. Nous pouvons vérifier la conclusion ci-dessus par isprotpTypeOf () ou object.getPrototypeOf () (la valeur de retour de cette fonction est l'objet prototype, c'est-à-dire la valeur de _proto_).

 alert (personne.prototype.isprototypeof (garçon)); // true alert (object.getPrototypeOf (boy) .First_name); // "guo"

Pour le moment, nous pouvons faire une vérification supplémentaire. Et si nous créons un attribut qui est dupliqué avec l'attribut d'objet Prototype dans l'instance?

 var boy = new personne (); var girl = new personne (); boy.hair_color = "red"; alert (boy.hair_color); // alerte rouge (girl.hair_color); // Black Alert (object.getPrototypeOf (boy) .hair_color); //noir

On peut voir que l'attribut en double déclaré dans l'instance bloquera les propriétés dans l'objet Prototype, mais il ne sera remplacé et n'affectera pas le type de genre de l'objet Prototype (objet.getprotototypeof (boy) .hair_color == Black), ni affectera les objets d'instance qui partagent le type de genre de l'objet prototype (Girl.Hair_color == Black). Dans le même temps, vous pouvez utiliser l'opérateur de suppression pour supprimer les attributs déclarés par l'objet d'instance pour annuler l'effet de masquage. Nous pouvons utiliser HasownProperty () pour vérifier si un genre existe dans une instance (true) ou dans un objet prototype (FALSE).

 alert (boy.hasownproperty ("hair_color")); //vrai

Vous pouvez utiliser object.keys () pour énumérer les propriétés.

 var key = object.keys (personne.prototype); alerte (clé);

Après les avoir appris, nous constaterons qu'en utilisant la méthode d'écriture ci-dessus pour déclarer un objet prototype, il y aura un problème. Le constructeur ne pointe plus la personne, ce qui est contraire à la valeur par défaut pointant vers une fonction contenant l'attribut prototype. En effet: chaque fois qu'une fonction est créée, un objet prototype sera automatiquement créé et cet objet créera un constructeur par défaut. Ainsi, ici, notre essence est de réécrire le prototype par défaut, de sorte que le nouveau constructeur est également devenu un pointant vers la fonction objet, ne pointant plus la fonction de personne. Si le constructeur est vraiment important, vous devez écrire le constructeur: personne.

Après cela, nous devons connaître la dynamique du prototype. La modification des propriétés de l'objet Prototype sera reflétée dans l'instance, que l'instance soit créée avant ou après les changements génériques de l'objet prototype.

 function Person () {} personne.prototype = {first_name: "guo", hair_color: "noir", ville: "zhengzhou", acte: function () {alert ("eatation");}}; var boy = new personne (); Personne.prototype.hobby = "basket-ball"; var girl = new personne (); alerte (boy.hobby); //basket-ball

Comme le montre le code ci-dessus, même si la modification des propriétés d'objet prototype se produit après la création d'instance, l'instance de garçon partage toujours Person.prototype.hobby.

Cependant, cette situation ne se produit que lorsque l'attribut d'objet prototype est modifié. Lorsque l'attribut d'objet Prototype est complètement réécrit, la création de l'instance doit être placée après la réécriture de l'attribut d'objet Prototype, sinon une erreur se produira.

 fonction personne () {} var girl = new personne (); Person.prototype = {first_name: "guo", hair_color: "noir", ville: "zhengzhou", agir: function () {alert ("eatation");}}; var boy = new personne (); Personne.prototype.hobby = "basket-ball"; alerte (boy.hobby); // Alerte de basket-ball (girl.first_name); //indéfini

Pour en revenir au problème du "blocage", nous avons appris plus tôt que la création de l'attribut d'un objet d'instance (même nom qu'un certain attribut dans l'objet Prototype) bloquera l'attribut de l'objet Prototype, mais n'affectera pas d'autres objets d'instance. Il y a une erreur ici. Cette situation ne s'applique qu'aux types de données de base. Lorsque la valeur de l'attribut se réfère au type, un gros problème se produira. Voir le code suivant.

 fonction personne () {} personne.prototype = {premier_name: "guo", hair_color: "noir", amis: ["nick", "John"], ville: "zhengzhou", acte: function () {alert ("eatation");}}; var boy = new personne (); boy.friends.push ("Mike"); var girl = new personne (); alerte (boy.friends); // Nick, John, Mike Alert (Girl.friends); // Nick, John, Mike

On peut voir que la phrase ci-dessus ne s'applique pas, car les amis existent dans l'objet prototype, pas chez le garçon, donc sa modification affectera cet environnement. (Nous pouvons créer une propriété d'une instance de garçon via boy.frindes = []) Ensuite, nous devons introduire une combinaison de modèles de constructeur et de motifs prototypes.

 Fonction Person (Hair_Color, City) {this.hair_color = hair_color; this.city = ville; this.friends = ["John", "Nick"]; } Personne.prototype = {Constructor: Person, first_name: "guo", act: function () {alert ("eatation"); }}; var boy = new personne ("noir", "zhengzhou"); var girl = new personne ("rouge", "Shenyang"); boy.friends.push ("nick"); alerte (girl.friends); alerte (boy.friends);

Ce mode est la méthode la plus utilisée et la plus reconnue pour créer des types personnalisés dans ECMAScript, et peut même être utilisé comme mode par défaut.

Mais pour les programmeurs travaillant dans d'autres langages orientés objet, ce modèle semble bizarre. Afin de résumer toutes les informations dans le constructeur, le modèle de prototype dynamique apparaît. Le mode dynamique utilise principalement une instruction IF pour déterminer si l'objet Prototype doit être initialisé pour atteindre le but d'économiser des ressources.

De plus, il existe un mode de construction sûr pour s'adapter à la situation où il n'y a pas d'attribut partagé et aucune utilisation de cela.

L'analyse du prototype ci-dessus dans JavaScript [recommandé] 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.