Maison > interface Web > Questions et réponses frontales > Comment configurer une chaîne de prototypes en JavaScript

Comment configurer une chaîne de prototypes en JavaScript

PHPz
Libérer: 2023-04-26 15:22:39
original
837 Les gens l'ont consulté

JavaScript est un langage de programmation basé sur des prototypes. En JavaScript, chaque objet possède un objet prototype.Nous pouvons accéder et hériter des propriétés et des méthodes de l'objet parent via le mécanisme de chaîne de prototypes JavaScript, réalisant ainsi la réutilisation et l'optimisation du code.

Ce qui suit est un article sur la configuration de la chaîne de prototypes en JavaScript. Il présente principalement ce qu'est la chaîne de prototypes de JavaScript, comment créer des objets prototypes et comment créer des objets d'instance.

1. Chaîne de prototypes JavaScript

La chaîne de prototypes JavaScript signifie que chaque objet a un objet prototype (prototype), qui contient des propriétés et des méthodes. Lors de l'accès aux propriétés et méthodes d'un objet, JavaScript vérifiera d'abord si la propriété ou la méthode existe dans l'objet lui-même. Si elle n'existe pas, il recherchera la chaîne de prototypes de l'objet jusqu'à ce qu'il trouve la propriété ou la méthode. Si la propriété ou la méthode n'est pas trouvée dans toute la chaîne de prototypes, undefined est renvoyé.

Nous pouvons utiliser le mécanisme de chaîne de prototypes de JavaScript pour partager les propriétés et les méthodes des objets, réalisant ainsi la réutilisation et l'optimisation du code. Habituellement, lors de l'implémentation de la fonction d'héritage, nous utiliserons le mécanisme de chaîne de prototypes pour hériter des propriétés et des méthodes sur l'objet parent, afin d'obtenir l'effet de réutilisation du code.

2. Créer des objets prototypes

En JavaScript, nous pouvons créer des objets prototypes via des constructeurs ou des littéraux d'objet. L'objet prototype du constructeur est accessible et défini via l'attribut prototype. L'objet prototype d'un littéral d'objet est accessible et défini via l'attribut __proto__.

1. Utilisez le constructeur pour créer un objet prototype

L'exemple de code est le suivant :

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

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};
Copier après la connexion

Dans l'exemple ci-dessus, nous avons défini un constructeur Person et ajouté une méthode sayHello à son objet prototype à l'aide de l'attribut prototype.

L'objet prototype créé à l'aide du constructeur sera partagé par l'objet instance. Par conséquent, nous pouvons accéder et appeler les propriétés et méthodes de l'objet prototype en créant un objet instance.

L'exemple de code est le suivant :

var person = new Person('Jack', 20);
person.sayHello(); // 输出:Hello, Jack
Copier après la connexion

Dans l'exemple de code ci-dessus, nous créons d'abord une instance d'objet personne via le constructeur Person, puis générons un message d'accueil en appelant la méthode sayHello.

2. Utilisez des littéraux d'objet pour créer des objets prototypes

L'exemple de code est le suivant :

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};
Copier après la connexion

Dans l'exemple de code ci-dessus, nous utilisons des littéraux d'objet pour créer un objet personne, qui contient les attributs et méthodes name, age et sayHello. . De plus, dans les littéraux d'objet, nous pouvons utiliser l'attribut __proto__ pour accéder et définir son objet prototype.

L'exemple de code est le suivant :

var person1 = {
  name: 'Jack',
  age: 20,
};

var person2 = {
  name: 'Lucy',
  age: 18,
};

person1.__proto__ = person;
person2.__proto__ = person;

person1.sayHello(); // 输出:Hello, Jack
person2.sayHello(); // 输出:Hello, Lucy
Copier après la connexion

Dans l'exemple de code ci-dessus, nous avons d'abord créé deux objets d'instance de personne1 et personne2, puis avons pointé leurs objets prototypes vers l'objet personne défini ci-dessus via l'attribut __proto__, obtenant ainsi le message sayHello. La méthode est partagée et peut être consultée et appelée directement dans l'objet instance.

3. Créer des objets d'instance

En JavaScript, nous pouvons créer des objets d'instance via des constructeurs ou des littéraux d'objet. Lorsque le constructeur crée un objet instance, l'utilisation du mot-clé new peut automatiquement appeler le constructeur et renvoyer un nouvel objet instance. Les littéraux d'objet créent directement des objets d'instance.

1. Utilisez le constructeur pour créer un objet instance

L'exemple de code est le suivant :

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

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

var person = new Person('Jack', 20);
person.sayHello(); // 输出:Hello, Jack
Copier après la connexion

Dans l'exemple de code ci-dessus, nous définissons d'abord un constructeur Person et ajoutons une méthode sayHello à son objet prototype. Ensuite, nous appelons le constructeur Person à l'aide du nouveau mot-clé, créons une instance d'objet personne et générons un message d'accueil en appelant la méthode sayHello.

2. Utilisez des littéraux d'objet pour créer des objets d'instance

L'exemple de code est le suivant :

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var person1 = Object.create(person);
person1.name = 'Jack';
person1.age = 20;
person1.sayHello(); // 输出:Hello, Jack

var person2 = Object.create(person);
person2.name = 'Lucy';
person2.age = 18;
person2.sayHello(); // 输出:Hello, Lucy
Copier après la connexion

Dans l'exemple de code ci-dessus, nous avons d'abord créé un objet personne à l'aide de littéraux d'objet, puis avons créé deux instances à l'aide de la méthode Object.create. objets person1 et person2, et spécifiez leurs objets prototypes en tant qu’objets personne. Enfin, nous définissons respectivement les attributs name et age pour les objets person1 et person2, et générons le message d'accueil en appelant la méthode sayHello.

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!

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