Maison > interface Web > js tutoriel > Maîtrisez l'importance des prototypes JavaScript et des chaînes de prototypes

Maîtrisez l'importance des prototypes JavaScript et des chaînes de prototypes

WBOY
Libérer: 2024-01-11 16:56:16
original
1195 Les gens l'ont consulté

Maîtrisez limportance des prototypes JavaScript et des chaînes de prototypes

Compréhension approfondie du rôle des prototypes JavaScript et des chaînes de prototypes

JavaScript est un langage orienté objet basé sur des prototypes. En JavaScript, chaque objet possède un objet prototype, à travers lequel les propriétés et les méthodes sont héritées. Comprendre les prototypes JavaScript et les chaînes de prototypes est très important pour les développeurs. Cet article approfondira le rôle des prototypes JavaScript et des chaînes de prototypes et fournira des exemples de code spécifiques.

1. Prototype JavaScript

En JavaScript, chaque objet a un objet prototype. Nous pouvons accéder à l'objet prototype via l'attribut __proto__ de l'objet. L'objet prototype est également un objet. Il n'est pas essentiellement différent des autres objets ordinaires et il possède également son propre objet prototype.

Nous pouvons créer un objet JavaScript simple avec le code suivant :

var obj = { name: 'John', age: 30 };
Copier après la connexion

Dans cet exemple, obj est un objet JavaScript normal. Nous pouvons utiliser obj.__proto__ pour accéder à son objet prototype. Vous pouvez vérifier que l'objet prototype de obj est Object.prototype via le code suivant :

console.log(obj.__proto__ === Object.prototype); // true
Copier après la connexion

L'objet prototype est un objet JavaScript ordinaire. Il définit certaines propriétés et méthodes communes qui peuvent être partagées par les instances d'objet. Par exemple, l'objet Object.prototype définit la méthode toString(), qui peut être appelée par n'importe quel objet :

console.log(obj.toString()); // [object Object]
Copier après la connexion

2. Chaîne de prototypes JavaScript

La chaîne de prototypes en JavaScript est une structure de chaîne composée d'objets prototypes. Chaque objet possède une propriété interne [[Prototype]] qui pointe vers son objet prototype. Grâce à la chaîne de prototypes, un objet peut hériter des propriétés et des méthodes de son objet prototype.

Par exemple, nous pouvons créer un objet Person via le code suivant et définir une méthode sayHello() pour celui-ci :

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

var person = new Person('John');
person.sayHello(); // Hello, John
Copier après la connexion

Dans cet exemple, Person est un constructeur et un objet d'instance de personne est créé via le nouveau mot-clé. L'objet prototype de cet objet personne est Person.prototype. Nous pouvons appeler des méthodes définies dans l'objet prototype via l'objet personne.

La fonction de la chaîne de prototypes est que lorsqu'un objet accède à une propriété ou une méthode, si l'objet lui-même n'en a pas, il recherchera vers le haut le long de la chaîne de prototypes jusqu'à ce qu'il trouve la propriété ou la méthode correspondante, ou atteigne null à la fin. haut de la chaîne des prototypes.

3. Compréhension approfondie de la chaîne de prototypes

Afin de mieux comprendre la chaîne de prototypes, nous pouvons la démontrer à travers l'exemple de code suivant :

function Fruit() {
  this.name = 'fruit';
  this.color = 'red';
}

Fruit.prototype.getInfo = function() {
  return 'This is a ' + this.color + ' ' + this.name;
}

function Apple() {
  this.name = 'apple';
}

Apple.prototype = new Fruit();

var apple = new Apple();
console.log(apple.getInfo()); // This is a red apple
Copier après la connexion

Dans cet exemple, nous définissons deux constructeurs : Fruit et Apple. Le constructeur Fruit définit les propriétés de nom et de couleur, et la méthode getInfo est définie via l'objet prototype. Le constructeur Apple hérite des propriétés et des méthodes du constructeur Fruit, et l'héritage est obtenu en définissant l'objet prototype d'Apple sur l'objet instance de Fruit.

En créant un objet pomme et en appelant la méthode getInfo, nous pouvons voir que l'objet pomme hérite avec succès de la méthode du constructeur Fruit, renvoyant ainsi correctement "Ceci est une pomme rouge".

Dans cet exemple, la structure de la chaîne de prototypes est la suivante : objet pomme -> Apple.prototype -> Fruit.prototype -> Object.prototype -> Lors de la recherche d'une propriété ou d'une méthode, si l'objet lui-même n'en a pas, il recherchera la chaîne de prototypes couche par couche jusqu'à ce qu'il trouve la propriété ou la méthode correspondante, ou atteigne null en haut de la chaîne de prototypes.

Cet exemple montre comment fonctionne la chaîne de prototypes et illustre le rôle des prototypes et des chaînes de prototypes en JavaScript.

4. Résumé

Le prototype JavaScript et la chaîne de prototypes sont des concepts importants pour comprendre la programmation orientée objet JavaScript. Grâce à l'objet prototype, l'objet peut hériter des propriétés et des méthodes de l'objet prototype, réalisant ainsi la réutilisation du code. Grâce à la chaîne de prototypes, les objets peuvent rechercher automatiquement la chaîne de prototypes lorsqu'ils accèdent aux propriétés et aux méthodes.

Dans le développement réel, comprendre le rôle des prototypes JavaScript et des chaînes de prototypes peut nous aider à mieux concevoir et organiser le code, et à améliorer la maintenabilité et l'évolutivité du code. Dans le même temps, maîtriser les principes des prototypes et des chaînes de prototypes nous aidera également à mieux comprendre certaines fonctionnalités avancées de JavaScript, telles que les fermetures et la portée.

J'espère que les exemples de code et les explications fournis dans cet article pourront aider les lecteurs à mieux comprendre le rôle des prototypes JavaScript et des chaînes de prototypes. Grâce à une compréhension approfondie des prototypes et des chaînes de prototypes, les développeurs peuvent écrire du code JavaScript de manière plus flexible et plus efficace.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal