Maison  >  Article  >  interface Web  >  La différence entre __proto__ et prototype en JS

La différence entre __proto__ et prototype en JS

PHPz
PHPzoriginal
2024-02-19 13:38:06537parcourir

La différence entre __proto__ et prototype en JS

En JS, __proto__ et prototype sont deux attributs liés aux prototypes, et ils ont des fonctions légèrement différentes. Cet article présentera et comparera les différences entre les deux en détail et fournira des exemples de code correspondants.

Tout d’abord, comprenons leur signification et leur utilisation.

proto

__proto__ est une propriété intégrée d'un objet, qui est utilisée pour pointer vers le prototype de l'objet. Chaque objet possède un attribut __proto__, y compris les objets personnalisés, les objets intégrés et les objets fonction. Grâce à l'attribut __proto__, nous pouvons accéder et manipuler la chaîne de prototypes de l'objet.

Regardons un exemple :

let obj = {};
console.log(obj.__proto__); // 输出:Object {}

let arr = [];
console.log(arr.__proto__); // 输出:Array []

function func() {}
console.log(func.__proto__); // 输出:[Function]

Dans le code ci-dessus, nous avons créé un objet obj vide et accédé à son attribut __proto__. Comme vous pouvez le voir, obj.__proto__ pointe vers un objet Object{}. De même, nous avons également créé un tableau vide arr et accédé à son attribut __proto__ Le résultat est que arr.__proto__ pointe vers un objet Array[]. Pour l'objet fonction func, son __proto__ pointe vers un objet [Function].

Pour résumer, l'attribut __proto__ est utilisé pour pointer vers le prototype de l'objet, à travers lequel nous pouvons accéder et faire fonctionner la chaîne de prototypes.

prototype

prototype est un attribut unique des objets fonction, qui pointe vers un objet prototype. Chaque objet fonction possède un attribut prototype, mais celui-ci n'a de sens que lorsque la fonction est utilisée comme constructeur.

Regardons un exemple :

function Person() {}

console.log(Person.prototype); // 输出:Person {}

Dans le code ci-dessus, nous définissons un objet fonction Person et accédons à son attribut prototype. Comme vous pouvez le voir, Person.prototype pointe vers un objet Person{}.

La fonction principale de l'attribut prototype est de construire la chaîne de prototypes de l'objet instance en mode constructeur. Lorsque nous utilisons un constructeur pour créer un objet, son attribut __proto__ pointe vers l'attribut prototype du constructeur.

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出:true

Dans le code ci-dessus, nous utilisons le constructeur Person pour créer un objet personne. Il s'avère que person.__proto__ pointe vers Person.prototype.

Différences et connexions

__proto__ et prototype sont tous deux liés au prototype de l'objet. Les connexions et différences entre eux sont les suivantes :

  1. __proto__ est un attribut de l'objet instance, utilisé pour pointer vers le prototype de l'objet. object; tandis que prototype est le constructeur Attributs des fonctions utilisés pour pointer vers l'objet prototype du constructeur.
  2. __proto__ est une propriété qui lit et accède à la chaîne de prototypes de l'objet et est accessible directement sur l'objet instance ; le prototype est une propriété du constructeur et n'est accessible qu'à l'intérieur du constructeur.
  3. __proto__ peut être modifié via Object.setPrototypeOf() ou par affectation directe ; tandis que le prototype ne peut être modifié qu'à l'intérieur du constructeur via la fonction name.prototype.
  4. __proto__ est un attribut non standard, pris en charge uniquement par certains navigateurs ; prototype est un attribut standard, et tous les objets et fonctions l'ont.

L'exemple de code suivant est utilisé pour illustrer davantage la différence et le lien entre les deux :

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出:Animal is eating
dog1.bark(); // 输出:Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出:true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出:true

Dans le code ci-dessus, nous créons une relation d'héritage en définissant le constructeur Animal et le constructeur Chien. Grâce aux attributs __proto__ et prototype, nous pouvons accéder à la chaîne de prototypes de l'objet et prouver la connexion entre eux.

Pour résumer, __proto__ et prototype sont tous deux liés aux prototypes en JS, mais ils sont différents dans leur fonction et leur utilisation. Comprendre leurs différences peut nous aider à mieux comprendre le mécanisme des prototypes dans JS et à les utiliser de manière plus flexible lors de l'écriture de code.

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!

Déclaration:
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