Maison >interface Web >js tutoriel >L'introduction la plus détaillée au prototype JS et à la chaîne de prototypes

L'introduction la plus détaillée au prototype JS et à la chaîne de prototypes

零到壹度
零到壹度original
2018-04-13 16:47:461665parcourir

Ce que cet article partage avec vous est l'introduction la plus détaillée aux prototypes JS et aux chaînes de prototypes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

1.

Lorsque JS crée un objet (qu'il s'agisse d'un objet normal ou d'un objet fonction), il existe une propriété intégrée appelée __proto__ qui pointe vers l'objet prototype du constructeur qui l'a créé.
L'objet person1 a un attribut __proto__, le constructeur qui le crée est Person, et l'objet prototype du constructeur est Person.prototype, donc :
person1.__proto__ == Person.prototype

Veuillez consulter le image ci-dessous :

Figure 6-1 de "Programmation avancée JavaScript"

D'après le schéma de connexion ci-dessus, nous pouvons obtenir :

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

Cependant, le point vraiment important à préciser est que cette connexion existe entre l'instance (person1) et l'objet prototype (Person) du constructeur (Person.prototype), et non entre l'objet prototype (person1) du constructeur (Person). instance () et constructeur ().

Remarque : Comme la plupart des navigateurs prennent en charge l'attribut __proto__, il a été ajouté à ES6 (certains navigateurs ES5 le prennent également en charge, mais ce n'est pas encore un standard).

2. Constructeur


Tous ceux qui connaissent Javascript savent que nous pouvons créer un objet comme celui-ci :

var obj = {}


C'est équivalent à ce qui suit :

var obj = new Object()


obj est une instance du constructeur (Object). Ainsi :

obj.constructor === Object
obj.__proto__ === Object.prototype

Le nouvel objet obj est créé à l'aide de l'opérateur new suivi d'un constructeur

. Le constructeur (Object) lui-même est une fonction (l'objet fonction mentionné ci-dessus), similaire au constructeur Person ci-dessus. C'est juste que cette fonction est définie dans le but de créer de nouveaux objets. Alors ne vous laissez pas intimider par Object.


De même, les constructeurs qui peuvent créer des objets ne sont pas seulement Object, mais aussi Array, Date, Function, etc.

Nous pouvons donc également utiliser des constructeurs pour créer un tableau, une date et une fonction
var b = new Array();
b.constructor === Array;
b.__proto__ === Array.prototype;var c = new Date(); 
c.constructor === Date;
c.__proto__ === Date.prototype;var d = new Function();
d.constructor === Function;
d.__proto__ === Function.prototype;

Ces constructeurs sont des objets fonction :

Objets fonction

3. Chaîne prototype

Test rapide pour vérifier votre compréhension :
  1. person1.__proto__

    Qu'est-ce que c'est ?
  2. Person.__proto__

    Qu'est-ce que c'est ?
  3. Person.prototype.__proto__

    Qu'est-ce que c'est ?
  4. Object.__proto__

    Qu'est-ce que c'est ?
  5. Object.prototype__proto__

    Qu'est-ce que c'est ?


Réponse :
Première question : person1.__proto__ === person1 的构造函数.prototypeParce que
person1的构造函数 === PersonParce que
person1.__proto__ === Person.prototypeAlors


Deuxième question : Person.__proto__ === Person的构造函数.prototype Parce que
Person的构造函数 === Function Parce que
Person.__proto__ === Function.prototype donc


Question 3 : Person.prototype
est un objet ordinaire, on n'a pas besoin d'y prêter attention ce qu'il a de propriétés, rappelez-vous simplement que c'est un objet normal.
Parce que le constructeur d'un objet normal === ObjetPerson.prototype.__proto__ === Object.prototype donc

Pour la quatrième question, référez-vous à la deuxième question, car Personne et Objet sont tous deux des constructeurs


Question 5 : L'objet Object.prototype possède également l'attribut proto
, mais il est spécial et est nul. Puisque null se trouve au sommet de la chaîne de prototypes, cela ne peut être que mémorisé. Object.prototype.__proto__ === null

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