Avant de parler de chaînes de prototypes, nous devons d'abord comprendre quelle est la relation entre les fonctions et les fonctions personnalisées, et quelles sont les relations inextricables entre les constructeurs, les prototypes et les instances? En fait, toutes les fonctions sont des instances de fonction. Il existe un prototype de propriété prototype sur le constructeur, qui est également un objet; Ensuite, il existe une propriété de constructeur sur l'objet Prototype, qui pointe vers le constructeur; Et il existe une propriété _proto_ sur l'objet d'instance, qui pointe également vers l'objet Prototype, et cette propriété n'est pas une propriété standard et ne peut pas être utilisée dans la programmation. Cette propriété est utilisée en interne pour une utilisation du navigateur.
// _proto_ Il existe un prototype de propriété dans la fonction. L'objet créé par cette fonction sera connecté à la propriété par défaut. // La relation entre le prototype et _proto___ est du point de vue de l'objet, le prototype provient du point de vue du constructeur.
Ci-dessous, regardons l'image et parlons.
1. La relation entre le constructeur, le prototype et l'instance
① + objet
② + fonction + objet + tableau
Après les comprendre, discutons de ce qu'est une chaîne prototype. Pour le dire franchement, il s'agit en fait d'une chaîne finie formée entre un objet d'instance finie et un prototype, qui est utilisé pour implémenter des attributs partagés et l'héritage. Ensuite, regardons le code pour parler.
var obj = nouveau objet (); L'objet est un objet prototype avec un objet prototype et un objet prototype obj._proto _._ proto _._ proto _._ proto__proto_ a également un objet prototype. L'objet prototype de l'objet continue de regarder les yeux et vous trouverez un exemple de chaîne prototype null var ar arr = []; arr -> array.prototype -> objet.prototype -> null var o = new object (); o -> object.prototype -> null; fonction foo1 () {this.name1 = '1';} fonction foo2 () {this.name2 = '2';} foo2.prototype = new foo1 (); fonction foo3 () {this.name = '3';} foo3.prototype = new foo2 (); var foo3 = new foo3 (); console.dir (foo3);Vient ensuite la question de l'héritage.
2. Héritage
1) Héritage du prototype
fonction animal (name) {this.name = name; } fonction tigre (couleur) {this.color = couleur; } // var tigre = new Tiger ('Yellow'); // Console.log (Tiger.Color); // Console.log (Tiger.Name); // Undefined // Tiger.prototype = nouvel animal ('Tiger'); // OBJECTION OBJET.PROTOTYPE.NAME = 'Big Tiger'; // la deuxième façon var tigre = new Tiger ('Yellow'); Console.log (Tiger.Color); Console.log (Tiger.Name);Il convient de noter qu'il y a deux problèmes principaux ici: ① Il n'est pas pratique de transmettre des paramètres au type de parent; ② Les types de référence dans le type de parent sont partagés par toutes les instances
2) ES5 fournit la méthode object.create () pour implémenter l'héritage
―Oie compatible // function calibre calière create (obj) {if (object.create) {return object.create (obj); } else {fonction foo () {} foo.prototype = obj; retourner new foo (); }}Cette méthode est une nouvelle fonctionnalité d'ES5, qui est en fait copie et héritée.
3) Copier l'héritage
var obj = {}; obj.extend = function (obj) {for (var k dans obj) {this [k] = obj [k]; }}4) Héritage du constructeur d'emprunt - Les membres du prototype du constructeur emprunté ne sont pas empruntés
fonction animal (name) {this.name = name;} function souris (newname) {animal.call (this, 'souris'); this.nickName = surnom;} var m = new souris ('jerry'); console.log (m.name); console.log (M.NickName);Problème existant: il peut résoudre le problème du passage des paramètres dans l'héritage prototype, mais les membres (attributs et méthodes) sur l'objet prototype dans le type de parent ne peuvent pas être hérités pour
5) L'objet héritage de prototype combiné est dynamique
fonction personne (name) {this.name = name;} personne.prototype.showname = function () {console.log (this.name);} fonction étudiant (nom, âge) {personne.Call (this, name); this.age = Âge;} student.prototype = new Person (); student.prototype.contructor = étudiant; student.prototype.showage = function () {console.log (this.age);} var stu.showage ('zhang san', 12); stu.showname (); stu.showage ();[Héritage prototype + héritage du constructeur d'emprunteurs] Sa caractéristique est qu'une copie des attributs par instance, et la méthode est partagée
[Résumé] Pour le mettre dans une phrase très approximative, la soi-disant chaîne prototype est un moyen de comportement de trouver une mère, et on peut comprendre que les êtres humains sont nés par des êtres humains et que les démons sont nés par des démons. Il n'y a en fait qu'un seul noyau de la chaîne prototype: le partage d'attribut et le contrôle indépendant. Lorsque votre instance d'objet a besoin d'attributs indépendants, l'essence de toutes les pratiques est de créer des attributs dans l'instance d'objet. Si vous ne pensez pas trop, vous pouvez définir directement les attributs indépendants dont vous avez besoin en personne pour écraser les propriétés du prototype. En bref, lorsque vous utilisez l'héritage du prototype, vous devez prêter une attention particulière aux attributs du prototype, car ce sont toutes des existences qui affectent tout le corps. La méthode la plus courante est maintenant le mode de combinaison.
1. Chaîne prototype
1) La relation entre le constructeur, le prototype et l'instance
①Le constructeur a un prototype de propriété, qui est un objet (une instance d'un objet). ② L'objet Prototype a un attribut constructeur, qui pointe vers la fonction du constructeur à laquelle appartient l'objet prototype. ③ L'objet d'instance a un attribut _proto_, qui pointe également vers l'objet prototype du constructeur. Il s'agit d'une propriété non standard et ne peut pas être utilisée pour la programmation. Il est utilisé par le navigateur lui-même. 2) la relation entre le prototype et _proto_
①Prototype est une propriété du constructeur
②_proto_ est l'attribut de l'objet d'instance
- Les deux pointent vers le même objet
[Résumé] i) Les fonctions sont également des objets et les objets ne sont pas nécessairement des fonctions;
ii) L'essence d'un objet: un ensemble non ordonné de paires de valeurs clés; Les valeurs dans les paires de valeurs clés peuvent être des valeurs de tout type de données
iii) L'objet est un conteneur, et le conteneur contient (propriétés et méthodes)
3) Recherche d'attribut
① Lorsque vous accédez à un membre de l'objet, vous chercherez d'abord s'il existe dans l'objet.
②i il n'y a pas d'objet actuel, recherchez-le dans l'objet prototype du constructeur
③Si l'objet prototype n'est pas trouvé, recherchez le prototype de l'objet prototype
④ Sachez que le prototype de l'objet Prototype d'objet est nul
2. Fonction
- Toutes les fonctions sont des instances de fonction
① Objet local: objet indépendant de l'environnement hôte (navigateur) - y compris l'objet, le tableau, la date, le regexp, la fonction, l'erreur, le nombre, la chaîne, le booléen
② Objets intégrés - y compris les mathématiques et le monde (Window, qui est une variable globale en JS), et ne n'est pas nécessaire lors de l'utilisation.
OBJET-HOST - y compris les objets personnalisés, Dom, Bom
Ce qui précède est la description complète de la façon de comprendre la chaîne prototype JS qui vous a été introduite. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!