Analyse der Verwendungsbeispiele für die Vererbung der Javascript-Prototypkette_Javascript-Kenntnisse

In diesem Artikel wird die Verwendung der Vererbung der JavaScript-Prototypkette anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Shape(){
this.name = 'Form'; this.toString = function(){
Geben Sie this.name zurück;
}
}

Funktion TwoDShape(){
this.name = '2D-Form'; }
Funktion Dreieck(Seite,Höhe){
this.name = 'Dreieck'; this.side = Seite;
this.height = Höhe;
this.getArea = function(){
Gibt this.side*this.height/2 zurück; };
}

/* Vererbung */
TwoDShape.prototype = new Shape(); Triangle.prototype = new TwoDShape();


Wenn wir die Prototypeigenschaft eines Objekts komplett neu schreiben, hat dies manchmal einen gewissen negativen Einfluss auf die Konstruktoreigenschaft des Objekts.
Daher ist es eine sehr gute Angewohnheit, die const-Attribute dieser Objekte entsprechend zurückzusetzen, nachdem wir die relevanten Einstellungen für die Vererbungsbeziehung abgeschlossen haben. Wie unten gezeigt:

Code kopieren

Der Code lautet wie folgt:TwoDShape.prototype.constructor = TwoDShape; Triangle.prototype.constructor = Dreieck; Umgeschrieben:

Code kopieren

Der Code lautet wie folgt:Funktion Shape(){} Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){ return this.name; }

Funktion TwoDShape(){}

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

TwoDShape.prototype.name = '2D-Form';
Funktion Dreieck(Seite,Höhe){
this.side = Seite;
this.height = Höhe;
}

Triangle.prototype = new TwoDShape; Triangle.prototype.constructor = Dreieck

Triangle.prototype.name = 'Dreieck'; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }


Umschreiben (als Referenz statt als Wert übergeben):




Code kopieren


Der Code lautet wie folgt:

Funktion Shape(){}

Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){
return this.name;

} Funktion TwoDShape(){} TwoDShape.prototype = Shape.prototype; TwoDShape.prototype.constructor = TwoDShape; TwoDShape.prototype.name = '2D-Form';

Funktion Dreieck(Seite,Höhe){

this.side = Seite;
this.height = Höhe;
}

Triangle.prototype = TwoDShape.prototype; Triangle.prototype.constructor = Dreieck

Triangle.prototype.name = 'Dreieck'; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }


Obwohl diese Methode die Effizienz verbessert, hat sie einen Nebeneffekt, da sie als Referenz und nicht als Wert übergeben wird. Dies wirkt sich auf den Namenswert im „übergeordneten Objekt“ aus.
Das untergeordnete Objekt und das übergeordnete Objekt verweisen auf dasselbe Objekt. Sobald also das untergeordnete Objekt seinen Prototyp ändert, wird auch das übergeordnete Objekt sofort geändert.

Erneut umschreiben (mit temporärem Konstruktor):




Code kopieren


Der Code lautet wie folgt:

Funktion Shape(){}
Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){
return this.name;
}
Funktion TwoDShape(){}
var F = function(){}
F.prototype = Shape.prototype; TwoDShape.prototype = new F(); TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D-Form'; Funktion Dreieck(Seite,Höhe){
this.side = Seite;
this.height = Höhe;
}
F.prototype = TwoDShape.prototype; Triangle.prototype = new F(); Triangle.prototype.constructor = Dreieck
Triangle.prototype.name = 'Dreieck'; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }


Obwohl diese Methode die Effizienz verbessert, hat sie einen Nebeneffekt, da sie als Referenz und nicht als Wert übergeben wird. Dies wirkt sich auf den Namenswert im „übergeordneten Objekt“ aus.

Das untergeordnete Objekt und das übergeordnete Objekt verweisen auf dasselbe Objekt. Sobald also das untergeordnete Objekt durch Ausrichten des Prototyps geändert wird, wird auch das übergeordnete Objekt sofort geändert.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.