JavaScript-Entwurfsmuster Erlernen von „Klassenvererbung'_Javascript-Fähigkeiten-js-Tutorial-php.cn

JavaScript-Entwurfsmuster Erlernen von „Klassenvererbung'_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:10:01

Original

982 Leute haben es durchsucht

Bevor man etwas tut, muss man zunächst die Vorteile verstehen, die es hat, es zu tun. Ich glaube, dass niemand bereit ist, etwas ohne Grund zu tun. Wenn wir eine Klasse entwerfen, hoffen wir im Allgemeinen, dass die Verwendung von Vererbung dies perfekt bewerkstelligen kann. Mit dem Vererbungsmechanismus können Sie den Entwurf erneut auf der Grundlage der vorhandenen Klasse erstellen und diese vollständig nutzen der Methoden, die sie bereits haben. Hier ohne Umschweife einige Beispiele:

Code kopieren Der Code lautet wie folgt:

Funktion Person(name){

This.name = name;

}

Person.prototype.getname = function(){

Geben Sie diesen.Namen zurück;

}

Funktion Bloger(name,blog){

Person.call(this,name);

This.blog = blog;

}

var blogger = neuer Blogger("zhenn","http://www.jb51.net");

Alert(bloger.name=="zhenn"); /*return true*/

Alert(bloger.blog) /*Alert http://www.jb51.net*/

Alert(bloger.getname()=="zhenn"); /*Prompt „bloger.getname ist keine Funktion“*/

Wie Sie dem obigen Beispiel entnehmen können, ruft Blogger die nativen Eigenschaften und Methoden seiner übergeordneten Klasse Person dynamisch über einen internen Aufruf auf (eine Erläuterung des Aufrufs finden Sie unter http://www.jb51.net/article/ 62086.htm), was so verstanden werden kann, dass Bloger Person erbt und zu einer Unterklasse davon wird. Aufmerksame Schüler werden jedoch feststellen, dass die Methoden im Person-Prototypobjekt nicht einfach durch Aufrufen geerbt werden können, was bedeutet, dass „bloger. getname“ nicht vorhanden ist eine Funktion“ ist der Grund. Aber keine Sorge, Sie können dieses Problem mit ein wenig Verarbeitung des obigen Codes lösen!

Code kopieren Der Code lautet wie folgt:

Funktion Person(name){

This.name = name;

}

Person.prototype.getname = function(){

Geben Sie diesen.Namen zurück;

}

Funktion Bloger(name,blog){

Person.call(this,name);

This.blog = blog;

}

/*Bitte beachten Sie die folgenden zwei Codezeilen*/

Bloger.prototype = neue Person(); 

Bloger.prototype.constructor = Bloger;

var blogger = neuer Blogger("zhenn","http://www.jb51.net");

Alert(bloger.name=="zhenn"); /*return true*/

Alert(bloger.blog) /*Alert http://www.jb51.net*/

Alert(bloger.getname()=="zhenn"); /*Prompt true*/

Hier müssen wir diese beiden Codezeilen erklären. Wir wissen, dass jeder Konstruktor ein Prototyp-Attribut hat, das auf das Prototyp-Objekt des Konstruktors verweist. Tatsächlich ist das Prototyp-Objekt auch ein Instanzobjekt, aber im Prototyp Objekt Die definierten Eigenschaften und Methoden können von allen Instanzobjekten gemeinsam genutzt werden. Daraus kann geschlossen werden, dass der Zweck des Hinzufügens von zwei Codezeilen darin besteht, das Prototypobjekt der Unterklasse so festzulegen, dass es auf ein instanziiertes Objekt der übergeordneten Klasse verweist Objekt der übergeordneten Klasse Alle Prototypattributmethoden der übergeordneten Klasse werden geerbt, wodurch unser Ziel erreicht wird. Der Prototyp der Unterklasse erbt alle Eigenschaften und Methoden des Instanzobjekts der übergeordneten Klasse.

Aber Sie sollten auch auf die Codezeile Bloger.prototype.constructor = Bloger achten, denn wenn Sie den Prototyp der Unterklasse auf eine Instanz der übergeordneten Klasse setzen, zeigt sein Konstruktorattribut auf die übergeordnete Klasse Sie müssen den Konstruktor des Unterklassenprototyps erneut festlegen. Zu diesem Zeitpunkt ist die JavaScript-Klassenvererbung perfekt implementiert.

Um die Deklaration von Unterklassen zu vereinfachen, kann der gesamte Prozess der Erweiterung einer Unterklasse in einer Funktion namens „extend“ geschrieben werden. Die Funktion besteht darin, eine neue Klasse basierend auf einer bestimmten Klassenstruktur zu erstellen:

Code kopieren Der Code lautet wie folgt:

Funktion verlängern(childClass,parentClass){

var F = new Function();

F.prototype = parentClass.prototype;

childClass.prototype = new F();

childClass.prototype.constructor = childClass;

}

Mit dieser Erweiterungsfunktion können Sie Unterklassen einfach erweitern. Die beiden oben hinzugefügten Codezeilen können in „extend(Bloger,Person)“ geändert werden, und es kann auch eine vollständige Vererbung erreicht werden.