Maison > interface Web > js tutoriel > Exemple d'analyse des méthodes d'ajout de chaînes de prototypes JavaScript et des problèmes qui surviennent

Exemple d'analyse des méthodes d'ajout de chaînes de prototypes JavaScript et des problèmes qui surviennent

伊谢尔伦
Libérer: 2018-05-18 14:28:37
original
2111 Les gens l'ont consulté

L'idée de base de l'héritage de chaîne de prototypes est de laisser un objet prototype pointer vers une instance d'un autre type

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype.getSubValue = function () { 
 return this.subproperty 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // true
Copier après la connexion

Le code définit deux types, SuperType et SubType, chaque type a un attribut et une méthode, SubType hérite de SuperType et l'héritage est obtenu en créant une instance de SuperType et en attribuant l'instance à SubType.prototype.

L'essence de l'implémentation est de réécrire l'objet prototype et de le remplacer par une instance d'un nouveau type. Ensuite, toutes les propriétés et méthodes qui existent dans l'instance de SuperType existent désormais également dans SubType.prototype.

Nous savons que lors de la création d'une instance, il y aura un pointeur interne dans l'objet instance pointant vers le prototype qui l'a créé, qui est associé ici le code SubType.prototype = new SuperType() sera également. dans SubType .prototype crée un pointeur interne qui associe SubType.prototype à SuperType.

Ainsi, l'instance pointe vers le prototype de SubType, et le prototype de SubType pointe vers le prototype de SuperType. Ensuite, lorsque l'instance appelle la méthode getSuperValue(), elle continuera à rechercher le long de cette chaîne.

Ajouter une méthode

Lors de l'ajout d'une méthode au prototype SubType, si la classe parent porte également le même nom, SubType remplacera cette méthode pour atteindre l'objectif de re - . Mais cette méthode existe toujours dans la classe parent.

N'oubliez pas de ne pas l'ajouter sous forme littérale, car comme mentionné ci-dessus, l'héritage d'instance est essentiellement une réécriture. Si vous utilisez à nouveau la forme littérale, il sera à nouveau réécrit, mais cette fois la réécriture n'est pas suivie de Il y a. aucune association avec la classe parent, donc la chaîne de prototypes sera tronquée.

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype = { 
 getSubValue:function () { 
 return this.subproperty 
 } 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // error
Copier après la connexion

Problèmes

En utilisant simplement l'héritage de chaîne de prototypes, le problème principal vient des prototypes contenant des valeurs de type référence.

function SuperType() { 
 this.colors = ['red', 'blue', 'green'] 
} 
function SubType() { 
} 
SubType.prototype = new SuperType() 
var instance1 = new SubType() 
var instance2 = new SubType() 
instance1.colors.push('black') 
console.log(instance1.colors) // ["red", "blue", "green", "black"] 
console.log(instance2.colors) // ["red", "blue", "green", "black"]
Copier après la connexion

Le constructeur SuperType définit un attribut de couleurs. Lorsque SubType est hérité via la chaîne de prototypes, cet attribut apparaîtra dans SubType.prototype, tout comme SubType.prototype.colors a été spécialement créé, donc cela provoquera toutes les instances de SubType partagent cet attribut, donc si instance1 modifie la valeur du type de référence des couleurs, cela sera également reflété dans instance2.

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!

Étiquettes associées:
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