Explication du code du prototype et de la chaîne de prototypes en JavaScript

Le contenu de cet article concerne l'explication du code du prototype et de la chaîne de prototypes en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pour de nombreux développeurs front-end, les prototypes et les chaînes de prototypes en JavaScript sont un point de confusion, c'est pourquoi cet article enregistre ma compréhension de cet aspect et le mettra à jour avec une compréhension plus approfondie à l'avenir.

Objet

Si vous voulez comprendre les prototypes et les chaînes de prototypes, vous devez d'abord comprendre ce qu'est un objet ? La programmation orientée objet (POO) est le paradigme de programmation dominant actuel, qui résume diverses relations complexes en plusieurs objets, puis les divise et coopère avec eux pour compléter la simulation de l'environnement réel. Par conséquent, un objet est une abstraction d’un seul objet physique, et l’objet obtenu par abstraction est un conteneur avec des propriétés et des méthodes. Par exemple, si nous faisons abstraction d'un élève dans un objet étudiant, alors les attributs peuvent être utilisés pour enregistrer la classe de l'élève (comme la première année du collège, la première année du lycée, etc.), et les méthodes peuvent être utilisé pour représenter un certain comportement de l'élève (comme étudier, jouer, etc.).

Constructeur, objet d'instance et héritage

Quand on veut utiliser la programmation orientée objet, la première tâche est de générer des objets. En JavaScript, le constructeur est spécifiquement utilisé pour générer des objets d'instance. Un constructeur peut générer plusieurs objets d’instance, qui ont tous la même structure.

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

Une attention particulière doit être portée à :

• Dans le code ci-dessus, Student est le constructeur, mais afin de le distinguer des fonctions ordinaires, le premier la lettre de son nom doit être en majuscule.

• Le mot-clé this est utilisé dans le corps de la fonction, qui représente l'instance d'objet à générer.

• Lors de la génération d'objets, vous devez utiliser la nouvelle commande. Seul new générera un nouvel objet instance.

En plus d'utiliser la nouvelle commande pour générer de nouveaux objets d'instance, nous pouvons également les créer via Object.create(). Cette méthode convient aux situations où nous n'avons aucun moyen d'obtenir. le constructeur mais ne peut accéder qu'à un objet existant.

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

Dans le code ci-dessus, la méthode Object.create prend l'objet student1 comme prototype et génère l'objet student2. student2 hérite de toutes les propriétés et méthodes de student1.

Objet prototype (prototype)

Tout d'abord, comprenons pourquoi il existe un objet prototype (prototype) ?

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

Comme vous pouvez le voir dans le code ci-dessus, bien que les objets instanciés via le constructeur aient une méthode de salutation, car cette méthode est générée sur chaque objet instance de lui-même, c'est-à-dire chaque fois qu'un objet est généré, l'instance créera une nouvelle méthode de salutation. Mais en fait, les méthodes de salutation sont les mêmes, et il n'est pas nécessaire de les générer plusieurs fois et de gaspiller des ressources, c'est pourquoi l'objet prototype JavaScript est né. JavaScript stipule que chaque fonction possède un attribut prototype pointant vers un objet.

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

Dans le code ci-dessus, l'attribut prototype du constructeur Animal est l'objet prototype des objets d'instance cat1 et cat2. Ajoutez un attribut de couleur à l'objet prototype. Par conséquent, tous les objets d'instance partagent cet attribut.

Les propriétés de l'objet prototype ne sont pas des propriétés de l'objet instance lui-même. Tant que vous modifiez l'objet prototype, les modifications seront immédiatement reflétées dans tous les objets d'instance.

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

Si l'objet instance lui-même possède une certaine propriété ou méthode, il ne recherchera plus la propriété ou la méthode dans l'objet prototype.

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

Chaîne de prototypes

JavaScript stipule que tous les objets ont leurs propres objets prototypes (prototype). D'une part, n'importe quel objet peut servir de prototype à d'autres objets ; d'autre part, puisque l'objet prototype est aussi un objet, il possède également son propre prototype. Par conséquent, une "chaîne de prototypes" sera formée : objet à prototype, puis au prototype du prototype...

Si vous la tracez couche par couche, les prototypes de tous les objets pourront éventuellement être retracés jusqu'à l'objet. . prototype, c'est-à-dire la propriété prototype du constructeur Object. En d'autres termes, tous les objets héritent des propriétés de Object.prototype. Le prototype de Object.prototype est nul. null n'a aucune propriété ou méthode, ni son propre prototype. La fin de la chaîne des prototypes est donc nulle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!