Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:17:37
Original
866 Leute haben es durchsucht

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


Code kopieren


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 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.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage