Qu'est-ce qu'un prototype ? Prototype est un concept que nous n'avons pas évoqué dans l'apprentissage de base de JS. Prototype est un terme général qui inclut principalement. Objet prototype (prototype) , Prototype d'objet (__proto__) , chaîne prototype Attendez, ces concepts sont également couramment posés lors des entretiens selon les statistiques. Cet article vous aidera à comprendre et à maîtriser les connaissances pertinentes sur les prototypes, afin que vous ne soyez plus confus.
Nous avons étudié de nombreux langages orientés objet, comme Java, C++, etc., mais JavaScript est une exception. Avant ES6, il n'y avait pas de concept de classes. Alors, comment créions-nous des objets auparavant ? Il s'avère qu'avant ES6, nous utilisions des constructeurs pour créer des objets instanciés. Le constructeur est une fonction spéciale qui contient les caractéristiques publiques de l'objet. Il n'a de sens que de l'utiliser en conjonction avec new .
<script>
function Animal(name,age){ //La première lettre du nom du constructeur est en majuscule this.name=name;
this.age=âge;
this.eat=fonction(){
console.log('Je mange');
}
}
var dog=new Animal('Wangcai',3) //À utiliser avec new pour créer un objet console.log(dog.name);
console.log(chien.age);
chien.manger()
</script>
<script>.
fonction Animal (nom, âge) {
this.name=nom;
this.age=âge;
}
var chien=nouvel Animal('Wangcai',3)
console.log(chien.nom);
console.log(Animal.nom);
</script>
<script>.
fonction Animal (nom, âge) {
this.name=nom;
this.age=âge;
}
var chien=nouvel Animal('Wangcai',3)
Animal.color='noir'
console.log(Animal.color);
console.log(chien.color);
</script>
Avant de commencer à expliquer ce qu'est un objet prototype, expliquons d'abord un cas. Il s'agit toujours de la classe Animal. Nous venons de créer plusieurs objets instanciés et de générer les deux méthodes de. leurs objets instanciés.Après comparaison, nous avons constaté que la sortie était fausse, c'est-à-dire que les adresses des types de données complexes des deux sont différentes.
<script>
fonction Animal (nom, âge) {
this.name=nom;
this.age=âge;
this.eat=fonction(){
console.log('Je mange');
}
}
var chien=nouvel Animal('Wangcai',3)
var cat=nouvel Animal('Mimi',3)
var cochon=nouvel Animal('humhem',3)
var poisson=nouvel Animal('Gulu',3)
var mouton=nouvel Animal('咩咩',3)
console.log(dog.eat==cat.eat);
</script>
Lorsque nous créons un objet instancié, le nouveau processus créera d'abord un nouvel objet, mais les types de données complexes ouvriront un espace à stocker (objets, méthodes), ce qui entraînera d'innombrables ouvertures pour la même méthode dans la mémoire du bloc constructeur. provoquant un gaspillage extrême de mémoire
Le prototype du constructeur est un attribut au sein du constructeur. Son attribut est un pointeur pointant vers un objet. Cet objet stocke les méthodes publiques qui sont ensuite utilisées pour créer des instances via le constructeur. être utilisé publiquement lors de la conversion d'objets, et il n'est pas nécessaire d'ouvrir plusieurs espaces mémoire en double pour plusieurs types de données complexes identiques. Afin de résoudre le problème de gaspillage de mémoire mentionné ci-dessus, il peut également être directement appelé objet prototype.
Solution : Nous utilisons l'objet prototype pour stocker la méthode publique, laissons l'objet instancié appeler la méthode et comparons si les adresses des deux sont les mêmes
<script>
fonction Animal (nom, âge) {
this.name=nom;
this.age=âge;
}
Animal.prototype.eat=fonction(){
console.log('Je mange');
}
var chien=nouvel Animal('Wangcai',3)
var cat=nouvel Animal('Mimi',3)
chien.manger()
chat.manger()
console.log(dog.eat==cat.eat);
</script> Nous avons constaté que non seulement cette méthode était appelée avec succès, mais que les adresses des deux méthodes appelantes étaient les mêmes. Cela prouvait que son type de données public complexe n'ouvrait qu'un espace mémoire, réduisant ainsi le nombre de méthodes publiques écrites. le constructeur avant. Le problème du gaspillage de ressources à l'intérieur des fonctions.
La fonction du prototype d'objet __proto__ est de vous permettre de comprendre une question : Pourquoi la méthode ajoutée à l'attribut prototype du constructeur peut-elle être utilisée lors de l'instanciation de l'objet ? En effet, chaque objet a un attribut __proto__ (notez qu'il y a deux traits de soulignement avant et après). Cet attribut est également un pointeur, pointant vers le prototype d'objet prototype de son constructeur correspondant, ce qui explique pourquoi l'objet instancié peut appeler des méthodes dans. l'objet prototype.
Il convient de noter que la fonction de l'objet prototype __protp__ est uniquement de fournir une direction pour rechercher le contenu dans l'objet prototype. Nous n'avons pas besoin de l'utiliser, nous devons seulement nous en souvenir. pointe vers le constructeur correspondant. Le prototype d'objet prototype est
d'objet prototype __proto__ et le prototype d'objet prototype de la fonction constructeur a un attribut de constructeur, on l'appelle donc constructeur. On l'appelle constructeur car cet attribut pointe vers le constructeur correspondant lui-même. Il est principalement utilisé pour enregistrer à quel constructeur l'objet instancié fait référence
<script>.
fonction Animal (nom, âge) {
this.name=nom;
this.age=âge;
}
Animal.prototype.eat=fonction(){
console.log('Je mange');
}
var chien=nouvel Animal('Wangcai',4)
console.log(dog.__proto__.constructor);
console.log(Animal.prototype.constructor);
</script>
Nous avons constaté que le résultat imprimé est bien le constructeur lui-même