Heim > Web-Frontend > js-Tutorial > JavaScript-Simulationsmethoden zur Implementierung von inheritance_javascript-Fähigkeiten

JavaScript-Simulationsmethoden zur Implementierung von inheritance_javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:06:56
Original
1188 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode der JavaScript-Simulation zur Implementierung der Vererbung. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wir alle wissen, dass JavaScript nur „Klassen“ in OO simulieren und implementieren kann, was bedeutet, dass es in JavaScript keine Vererbung von Klassen gibt. Wir können die Implementierung nur simulieren, indem wir Attribute im Originalobjekt hinzufügen oder neu schreiben.

Definieren Sie zunächst eine übergeordnete Klasse,

//父类
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}
Nach dem Login kopieren

1. Prototypische Umsetzung:

//子类
//1、prototype继承
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();
Nach dem Login kopieren

Diese Methode ist sehr einfach. Weisen Sie einfach die Instanz der übergeordneten Klasse dem Prototypattribut der Unterklasse zu, und dann kann die Unterklasse die Methoden und Attribute des Vaters verwenden. Hier verwenden wir tatsächlich die Funktion zum Aufwärtssuchen in der Prototypenkette. In diesem Beispiel sucht JavaScript zunächst nach der Methode parentClassInfo() in der Unterklasse Daher wird weiterhin nach der Prototypeigenschaft ChildClassByPrototype gesucht, und der Wert ihrer Prototypeigenschaft ist eine Instanz von ParentClass, die über die Methode parentClassInfo() verfügt. Daher wird die Suche beendet und der Aufruf ist erfolgreich.

2. Umsetzung anwenden:

//2、apply继承
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
Nach dem Login kopieren

Anwenden in JavaScript kann als Ersetzen von Methode B durch Methode A verstanden werden. Der erste Parameter ist das Objekt der Methode B selbst und der zweite Parameter ist ein Array. Die Werte im Array sind die Parameter, die vorhanden sein müssen Wird an Methode A übergeben. Liste: Wenn der Parameter leer ist, dh keine Parameter übergeben werden, kann er über new Array (), [] übergeben werden.

3. Rufen Sie die Prototypenimplementierung auf:

//3、call+prototype继承
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();
Nach dem Login kopieren

Call und Apply haben ähnliche Funktionen, das heißt, beide ersetzen Methode B durch Methode A, aber die übergebenen Parameter sind unterschiedlich. Der erste Parameter der Call-Methode ist das Objekt von Methode B selbst, und nachfolgende Parameter sind nicht erforderlich müssen in ein Array verpackt werden und müssen direkt nacheinander geliefert werden. Da die Funktionen fast gleich sind, warum gibt es einen zusätzlichen Satz zur Prototypenzuweisung? Dies liegt daran, dass die Aufrufmethode nur die Methodenersetzung implementiert und keine Objektattribute kopiert.

Jede Methode hat ihre anwendbare Umgebung, beispielsweise wenn die übergeordnete Klasse einen parametrisierten Konstruktor hat:

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}
Nach dem Login kopieren

In diesem Fall ist der Prototyp nicht anwendbar und es kann „Anwenden“ oder „Aufruf“ verwendet werden

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();
Nach dem Login kopieren
Instantiierung:

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");
Nach dem Login kopieren
Wie wähle ich zwischen „Bewerben“ und „Anrufen“? Bei der OO-Vererbung erbt die Unterklasse von der übergeordneten Klasse, daher sollte es sich auch um den Typ der übergeordneten Klasse handeln. Das heißt, ChildClassByCall und ChildClassByApply sollten ebenfalls vom Typ ParentClass sein. Wenn wir sie jedoch mit „instanceof“ erkennen, werden wir feststellen, dass die über apply geerbten Unterklassen nicht vom Typ ParentClass sind. Daher empfehlen wir die Verwendung eines Aufrufprototyps zur Simulation der Vererbung. Es wird gesagt, dass die Vererbung der Google Map API diese Methode verwendet.

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