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

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

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

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"]

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!