Racontez des connaissances intéressantes dans vos propres mots .
Salut à tous, je le suis 梅巴哥er. J'ai vu beaucoup de gens avoir un nuage de sentiments sur la chaîne de prototypes, en particulier prototype et __proto__, qui sont comme des jumeaux et sont trop abstraits, stupides et peu clairs. Dans cet article, nous parlerons de la connaissance de la chaîne de prototypes sous forme de storytelling, qui n'est pas forcément exhaustive.
Commencez par écrire un exemple:
log = console.log
function Star(name) {
this.name = name
}
Star.prototype.age = 18
var dili = new Star('dilireba')
log(Star.prototype)
log(dili.__proto__)
log(Star.prototype.constructor)
Avant de commencer, voyons d’abord d’où vient le prototype.
Jetons ensuite un œil à l'explication du professeur Ruan Yifeng: l' idée de conception du mécanisme d'héritage Javascript .
tout simplement,
- Le prototype est un objet, il existe dans la fonction
- Cet objet peut faire une zone partagée
- Cet objet peut ajouter des propriétés et des méthodes à la zone partagée partagée afin que toutes les instances du constructeur puissent être appelées.
- Par exemple
Star.prototype.age = 18, les instances du constructeur Star à ce moment ont toutes 18 ans.
Quel est le problème avec __proto__?
- proto consiste à fournir une chaîne de requête pour l'instance
- Il n'est utilisé que pour pointer vers le prototype et ne peut pas être utilisé
- Chaque objet a un __proto__
- Par exemple,
dili.__proto__c'est le pointStar.prototypede
Qu'est-ce que le constructeur?
- Il y a un constructeur dans prototype et __proto__
- Le rôle est de faire pointer le prototype du constructeur vers le constructeur
- Par exemple,
Star.protorype.constructorpointez surStar(){ }
Après avoir lu les connaissances théoriques, comment les comprenez-vous?
L'histoire commence:
Xiao Ming et Xiao Hua sont allés au restaurant pour manger ensemble un pot chaud. Commandé un fond de pot non épicé.
log = console.log
function Eat(name) {
this.name = name
this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 不辣
log(hua.type) // 不辣
Xiao Ming a estimé que le goût n'était pas assez épicé, alors il a rempli son propre bol d'une sauce épicée et l'a trempé.
log = console.log
function Eat(name) {
this.name = name
this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
ming.type = '辣酱'
log(ming.type) // 辣酱
log(hua.type) // 不辣
Ainsi, Xiao Ming a mangé la sauce piquante et Xiao Hua a mangé la sauce piquante qui n'était pas épicée. Maintenant, Xiaohua veut aussi manger de la sauce piquante, mais il est gêné de manger de la sauce piquante dans le bol de Xiaoming, que dois-je faire?
// 给小华也添加一份辣酱
hua.type = '辣酱'
De cette façon, Xiaohua avait également la sauce épicée. Mais il y a un problème: de cette façon, aucun d'entre eux n'aura de part et n'occupera trop de ressources. Y a-t-il une meilleure solution?
C'est vrai, il suffit d'ajouter de la sauce piquante directement au fond de la casserole!
// 现在我们来改下代码
log = console.log
function Eat(name) {
this.name = name
}
Eat.prototype.type = '辣酱' // 往锅里加辣酱
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 辣酱
log(hua.type) // 辣酱
Regardez, de cette façon, vous pouvez tous les deux manger un pot chaud avec une sauce épicée!
Après avoir lu l'histoire ci-dessus, est-ce plus clair? Ensuite, la question est, quelle est la relation entre ces objets?
Alors caressons-le.
Au début, il y avait un restaurant qui pouvait offrir des hot pot aux clients.
Maintenant, Xiao Ming et Xiao Hua viennent manger un pot chaud.
Les deux voulaient partager la sauce piquante, alors la sauce piquante a été ajoutée au pot pour rendre le fond du pot épicé.
Est-ce plus clair maintenant?
Alors qu'est-ce que le constructeur a à voir avec eux?
Venez et continuez à lire l'histoire.
Saturé et ivre, il est temps de partir!
Le serveur est venu et a jeté un coup d'œil, ah, ce que vous mangez à cette table est un pot chaud avec une sauce épicée?
Xiao Ming vient de dire que nous avons commandé la marmite à soupe claire, mais nous y avons ajouté de la sauce piquante. Alors Xiao Ming a sorti le menu de commande et l'a montré au serveur.
Le rôle du costructeur est de revenir au constructeur d'origine, vous voyez, Xiao Ming peut le montrer au serveur!
Eh bien, en voyant cela, vous pouvez essentiellement comprendre la relation entre ces objets. Alors, qu'en est-il de la chaîne de prototypes?
Continuons à raconter l'histoire.
Xiao Ming et Xiao Hua ont quitté le restaurant de hot pot, et ils discutent toujours de la sauce épicée qu'ils ont mangée aujourd'hui. Cette sauce piquante est si délicieuse, d'où vient-elle?
Xiaohua a dit, ce doit être la sauce piquante produite par la maison Laoganma. Cette boutique produit de nombreuses sortes de sauce piquante, et la sauce piquante que j'ai mangée aujourd'hui est la meilleure! !
Ainsi, les deux ont trouvé la place de Lao Gan Ma le long de la ligne de sauce piquante.
Xiao Ming a demandé à nouveau à ce moment, quelle société est Lao Gan Ma?
Xiaohua a dit, Lao Gan Ma est le siège social, et il n'y a rien dessus! Ils se spécialisent dans la sauce piquante!
Donc, nous avons cette photo!
C'est la chaîne de prototypes!
Quoi? Fini? Je n'ai pas encore assez entendu l'histoire. Xiaohua, attendez!
Article de référence:
- Idées de conception du mécanisme d'héritage Javascript
- Connaissances avancées JS, finition des connaissances de base ES6
- Comprendre le prototype et __proto__
ce qui précède.