Analyse des exemples d'utilisation de l'héritage de chaîne de prototypes Javascript_Compétences Javascript

Cet article analyse l'utilisation de l'héritage de chaîne de prototypes JavaScript avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Copier le code Le code est le suivant :

function Shape(){
this.name = 'forme';
this.toString = function(){
Renvoyez ce.nom ;
}
}

function TwoDShape(){
this.name = 'Forme 2D';
}
function Triangle(côté,hauteur){
this.name = 'Triangle';
this.side = côté;
this.hauteur = hauteur
this.getArea = function(){
Renvoie this.side*this.height/2; };
}

/* héritage */
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();

Lorsque nous réécrivons complètement la propriété prototype d'un objet, cela aura parfois un certain impact négatif sur la propriété constructeur de l'objet.

Par conséquent, après avoir terminé les paramètres de relation d'héritage pertinents, c'est une très bonne habitude de réinitialiser les attributs const de ces objets en conséquence. Comme indiqué ci-dessous :

Copier le code Le code est le suivant :

TwoDShape.prototype.constructor = TwoDShape

Triangle.prototype.constructor = Triangle;

Réécrit :

Copier le code Le code est le suivant :

function Shape(){}

Shape.prototype.name = 'forme';
Shape.prototype.toString = function(){
renvoie ce.nom ;
}

fonction TwoDShape(){}

TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape;

TwoDShape.prototype.name = 'forme 2D';

function Triangle(côté,hauteur){
this.side = côté;
this.hauteur = hauteur
}

Triangle.prototype = nouveau TwoDShape ;
Triangle.prototype.constructor = Triangle

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
retourner this.side*this.height/2
>

Réécrire (passer par référence au lieu de valeur) :

Copier le code Le code est le suivant :

function Shape(){}

Shape.prototype.name = 'forme';
Shape.prototype.toString = function(){
renvoie ce.nom ;
}

fonction TwoDShape(){}

TwoDShape.prototype = Shape.prototype
TwoDShape.prototype.constructor = TwoDShape;

TwoDShape.prototype.name = 'forme 2D';

function Triangle(côté,hauteur){
this.side = côté;
this.hauteur = hauteur
}

Triangle.prototype = TwoDShape.prototype
Triangle.prototype.constructor = Triangle

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
retourner this.side*this.height/2
>

Bien qu'elle améliore l'efficacité, cette méthode a un effet secondaire. Parce qu'elle est passée par référence au lieu de valeur, la valeur du nom dans « l'objet parent » est affectée.

L'objet enfant et l'objet parent pointent vers le même objet. Ainsi, une fois que l'objet enfant aura modifié son prototype, l'objet parent sera également modifié immédiatement.

Réécrivez à nouveau (en utilisant le constructeur temporaire) :

Copier le code Le code est le suivant :

fonction Forme(){}
Shape.prototype.name = 'forme';
Shape.prototype.toString = function(){
renvoie ce.nom ;
}
fonction TwoDShape(){}
var F = fonction(){}
F.prototype = Forme.prototype
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = 'forme 2D';
function Triangle(côté,hauteur){
this.side = côté;
this.hauteur = hauteur
}
F.prototype = TwoDShape.prototype
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
retourner this.side*this.height/2
>

Bien qu'elle améliore l'efficacité, cette méthode a un effet secondaire. Parce qu'elle est passée par référence au lieu de valeur, la valeur du nom dans « l'objet parent » est affectée.

L'objet enfant et l'objet parent pointent vers le même objet. Ainsi, une fois l'objet enfant modifié en alignant le prototype, l'objet parent sera également modifié immédiatement.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.