Explication détaillée des points de connaissance du prototype JavaScript et de la chaîne de prototypes

1. Prototype

1. Concept

En JavaScript, une fonction est un objet de type Function qui contient des propriétés et des méthodes. Le prototype (Prototype) est un attribut de Function .

L'attribut prototype est inclus lorsque la fonction est définie et sa valeur initiale est un objet vide. Aucun type de prototype n'est défini pour les fonctions en JavaScript, le prototype peut donc être de n'importe quel type.

Le prototype est utilisé pour enregistrer les propriétés et méthodes partagées de l'objet . Les propriétés et méthodes du prototype n'affectent pas les propriétés et méthodes de la fonction elle - même.

// Propriétés du type Fonction -> propriétés que possèdent toutes les fonctions console.log(Function.prototype); //[Fonction]

//Définir la fonction function fn() {
    console.log('c'est une fonction');
}

//La valeur par défaut du prototype est l'objet vide console.log(fn.prototype); //fn {}

// La fonction contient un constructeur --> tous les types de référence sont en fait des constructeurs console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

2. Obtenez le prototype

Vous pouvez obtenir le prototype de l'objet des deux manières suivantes pour définir les propriétés et méthodes partagées :

• via prototype du constructeur
• et via getPrototype de la méthode objet Object (obj).

fonction fn() {
    console.log('c'est une fonction');
}

//Utilisez la structure de syntaxe d'attribut de l'objet d'accès console.log(fn.prototype //fn {});
console.log(fn['prototype']);//fn {}

//Le type d'objet fournit la méthode getPrototypeOf() console.log(Object.getPrototypeOf(fn));

3. Comprendre l'attribut constructeur sur le prototype de fonction.

Object.getOwnPropertyDescriptors() est utilisée pour obtenir les descripteurs de toutes ses propres propriétés d'un objet.

var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //Les résultats de sortie sont les suivants :
//{
// valeur : [Fonction : Objet],
// accessible en écriture : vrai,
// énumérable : faux,
// configurable : vrai
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. Définition des propriétés et méthodes sur le prototype

Vous pouvez définir les propriétés et méthodes du prototype des deux manières suivantes :

• Les propriétés et méthodes de les prototypes sont définis séparément.

Constructor.prototype.Attribute name = valeur d'attribut; Constructor.prototype.Method name = function(){}

• ;

Lorsque nous devons ajouter de nombreux attributs au prototype, il est trop difficile d'écrire构造函数.prototype.属性名encore et encore. Nous pouvons modifier directement l'ensemble prototype

constructor.prototype = {.
    Nom de l'attribut : valeur de l'attribut,
    Nom de la méthode : function(){}}

function foo () {}foo.prototype = {
    constructeur : foo,
    nom : 'confiture',
    âge : 18 ans,
    adresse : 'Beijing'}var fn = new foo()console.log(fn.address) //

Méthode Pékin 5.isPrototypeOf()

Chaque objet aura une méthode isPrototypeOf() , qui est utilisée pour déterminer si l'objet est un prototype d'un autre objet.

L'exemple de code est le suivant :
// Définit l'objet via l'initialiseur var obj = {
    nom : « confiture »
}
//Définit la fonction constructeur Hero() {}
// Affecte l'objet obj au prototype du constructeur Hero Hero.prototype = obj;
// Crée un objet via le constructeur var hero = new Hero();

// La méthode isPrototypeOf() détermine si l'objet spécifié est le prototype d'un autre objet var result = obj.isPrototypeOf(hero);
console.log(result);//true

vérifie que obj est le prototype de hero

2. Chaîne de prototypes

1. Compréhension de la chaîne de prototypes

Ensuite, nous utilisons un morceau de code pour élargir notre compréhension de la chaîne de prototypes :

Scénario : Recherchez les objets sur l'objet obj Étapes effectuées par l'attribut d'adresse js :
    1. L'opération get sera déclenchée. 2. Recherchez l'attribut dans l'objet actuel. 3. S'il n'est pas trouvé, la recherche sera effectuée sur l'objet de la chaîne prototype (__proto__) à ce moment-là. 2. .S'il n'est pas trouvé, il continuera à chercher le long de la chaîne de prototypes jusqu'à ce que le prototype de niveau supérieur soit trouvé (ce qu'est le prototype de niveau supérieur n'est pas clair pour le moment)

1.1 L'exemple de code est le suivant :

var obj = {
    nom : 'confiture',
    âge : 19 ans
}
/* 
    Condition : Rechercher l'attribut d'adresse sur l'objet obj*/

// La chaîne de prototypes est recherchée couche par couche. Si elle n'est pas trouvée, elle sera recherchée jusqu'à ce que le prototype de niveau supérieur soit trouvé.
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    adresse : 'Pékin'
}

console.log(obj.address) // Pékin console.log(obj.__proto__.__proto__.__proto__) // { adresse : 'Pékin' }

1.2 Carte mémoire

Trouvez enfin l'attribut d'adresse
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. Qu'est-ce que le prototype de haut niveau ?

Comme nous l'avons mentionné ci-dessus, nous ne chercherons pas sans fin tout au long de la chaîne des prototypes. Lorsque le prototype de niveau supérieur est trouvé, undefined sera renvoyé s'il n'a pas encore été trouvé.

Alors, quel est le prototype de haut niveau ?
L'exemple de code est le suivant :

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

Le prototype de l'objet littéral nul obj est : {} . {} est le prototype de niveau supérieur.Lorsque nous continuons à imprimer __proto__ vers le haut, une valeur nulle est renvoyée, ce qui prouve que la couche précédente est déjà le prototype de niveau supérieur.

La figure suivante est un complément au prototype de niveau supérieur

manque dans le premier morceau de code :

顶层原型就是Object.prototype

3. Le prototype de l'objet (Object.prototype)

3.1 Alors, où est la fin de la chaîne des prototypes ? Par exemple, le troisième objet possède-t-il également un attribut prototype __proto__ ?

var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

Nous avons constaté que le résultat imprimé ci-dessus est空对象{}

• En fait, ce prototype est notre prototype de niveau supérieur

  var obj = {
    nom : 'confiture',
    âge : 19 ans
    }
    console.log(obj.__proto__) // {}
    console.log(Objet.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object est la classe parent de toutes les classes, donc obj.__proto__ est en fait Object.prototype,
  console.log(obj.__proto__ === Object.prototype) // true nous pouvons voir que le résultat Object.prototype est le prototype de niveau supérieur.

• Les prototypes d'objets créés directement à partir d'Object sont {}

3.2 Ensuite, nous pouvons demander. : {} Y a-t-il quelque chose de spécial à propos des prototypes ?

• Point particulier 1 : L'objet a un attribut prototype, mais son attribut prototype pointe déjà vers null, c'est-à-dire qu'il s'agit du prototype de niveau supérieur

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• point spécial 2 : il existe de nombreuses propriétés et méthodes par défaut sur cet objet ;
  • bien que le résultat de l'impression Object.prototype soit un objet vide {}, il n'est pas vide, mais les propriétés à l'intérieur ne sont pas énumérables. Par exemple, imprimons constructor propriété à voir

    <!-- On peut voir qu'il y a un attribut constructeur et qu'il n'est pas vide -->console.log(Object.prototype.constructor) // [Fonction : Objet] <!-- le constructeur fait référence à Object -->

  • us Vous pouvez également obtenir les descripteurs de toutes ses propres propriétés dans Object.prototype via la méthode Object.getOwnPropertyDescriptors() .

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //Comme indiqué dans la longue capture d'écran ci-dessous

    

4. Graphique de mémoire des relations de chaîne prototype