Analyse facile à comprendre des prototypes JS et des chaînes de prototypes

Cette fois, je vais vous apporter une analyse facile à comprendre des prototypes JS et des chaînes de prototypes. Quelles sont les précautions pour analyser les prototypes JS et les chaînes de prototypes. Voici des cas pratiques, jetons un coup d'œil ? .

Objets dans le navigateur

Quels objets y a-t-il dans le navigateur ? Dans ES, l'objet global est global, tandis que dans les navigateurs, l'objet global est window.

Entrez la fenêtre dans la console Chrome et nous pouvons voir ce qu'il y a dans la fenêtre.

Les objets suivants peuvent être trouvés dans la fenêtre.
Les attributs tels que Object, String, Numbr, Boolean, Array, Date, Math, parseInt et parseFloat sont tous des objets requis spécifiés par ES.
Tels que document, alerte, invite, atob, etc. Ce sont des attributs intégrés au navigateur.

Ces objets ont tous des structures de hachage. Par exemple, sous Object, String a ses propres attributs et méthodes, et a les appels API correspondants.

Types et objets simples

Les exemples sont les suivants : n1 est un type simple et n2 est un objet.

var n1 = 'a'var n2 = new String('a')
n1.length
n1.hasOwnProperty('0')
n2.length
n2.hasOwnProperty('0')
n1.xxx = 2n1.xxx // undefined

La différence

la valeur n1 est stockée dans la pile. Lorsque n2 est attribué, une adresse est créée dans la pile, pointant vers le tas, et un nouvel objet de type String est créé dans la mémoire du tas. Vous pouvez voir qu'il y a certains attributs dans l'objet n2, ainsi que l'attribut prototype.

Attributs

n2 est un objet qui a un attribut de longueur, c'est pourquoi il est appelé. n1 n'est qu'une chaîne , pourquoi a-t-elle aussi un attribut de longueur

Cela peut être compris comme ceci : lorsque n1.length, js effectuera les opérations suivantes : var temp = new ? String(n1);n1.length ;C'est-à-dire que lors de l'utilisation d'attributs ou de méthodes, un nouvel objet sera temporairement créé dans la mémoire tas. Cet objet est du type String correspondant. Après l'exécution, temp sera détruit. Par conséquent, l'opération n1.xxx = 2 ne signalera pas d'erreur, mais n1.xxx affiche à nouveau undéfini, car les données de n1 dans la mémoire tas ont été détruites à ce moment-là.

Par conséquent, en js, la nouvelle méthode d'un nouvel objet est rarement utilisée, mais la variable est affectée directement.

hasOwnProperty() dans n2

hasOwnProperty() est une méthode de type Object class Elle n'est pas trouvée sous le type Sting.

Ici, hasOwnProperty() se trouve dans n2.proto.proto. n2.proto pointe vers String.prototype et String.prototype.proto pointe enfin vers Object.prototype. String est un prototype et Object est également un prototype. Object.prototype stocke toutes les propriétés publiques du type Object.

De cette façon, il peut efficacement économiser de l'espace et éviter d'enregistrer de nombreux attributs dans chaque objet. Pour les attributs qui ne sont pas trouvés dans un objet, recherchez-les dans l'objet pointé par proto. Le point pointé est généralement le prototype d'un certain prototype.

Où trouver le proto et le prototype

var n = new Number(1)var s= new String('1')var o= new Object()

Les méthodes ci-dessus peuvent être considérées comme var object = function ().
En résumé, object.proto = function.prototype.

Visitez proto

Proto est relatif à l'objet. Trouvez le père pour voir qui a généré l'objet. Pour n, le père est Number, alors allez sur Number.prototype pour le trouver. Il y a aussi un proto dans Number Lors de l'accès, recherchez-le dans son objet parent.

Function
String.proto === Function.prototype //true

Les fonctions peuvent également être considérées comme des objets. String, Object et Number sont tous des objets et des fonctions. Parce que new String() a été utilisé auparavant, il s'agit d'une fonction et le type de données du résultat renvoyé par la fonction est un objet. Le père de String est Function.

Function.proto === Function.prototype //trueFunction.prototype.proto === Object.prototype //trueFunction.proto.proto === Object.prototype //true

Lorsque la Fonction est considérée comme un objet généré par la méthode Function,
c'est-à-dire var Function = new Function()
peut comprendre Function.proto === Function.prototype

Le type de Function est une fonction, qui est construite à partir de Function. La relation peut être vue sur l’image ci-dessus. Lorsque new String(), le type de String est également fonction et String.proto pointe vers Function.prototype.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment éviter les fonctionnalités et l'inférence du navigateur dans JS

Explication détaillée des cas d'utilisation des modèles de façade JS

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!