Simulieren Sie die Vererbungsbeziehung von Klassen und Klassen in JavaScript

Die Javascipt -Syntax unterstützt nicht "Klasse" (Klasse "(Klasse) [bereits unterstützt von ES6], es gibt jedoch Methoden zum Simulieren von Klassen. Heute werde ich hauptsächlich über die Methode der Simulation von "Klassen" in Javascipt und über die Zusammenfassung und Überprüfung der Erbschaft in JS sprechen.

Das Implementieren von "Klassen" und Erbschaft in JS ist sowohl der Schlüssel als auch die Schwierigkeit. Viele Schüler haben möglicherweise ein gewisses Verständnis von "Klassen" und Erbschaft in JS, aber wenn sie eingehend analysieren, haben sie das Gefühl, dass sie dies nicht tun können und sind mehrdeutig.

Fassen wir zunächst verschiedene Methoden zum Definieren von „Klassen“ durch JS zusammen:

Methode 1: Konstruktionsmethode

Diese Methode ist eine relativ klassische Methode und wir werden sie oft sehen. Verwenden Sie beim Generieren einer Instanz das neue Keyword. Die Eigenschaften und Methoden der Klasse können auch im Prototypobjekt des Konstruktors definiert werden.

 Funktionsperson (Name, Alter, Job) {this.name = name; this.age = Alter; this.job = Job;} person.Prototype.sayname = function () {alert (this.name);} var person1 = new Person ("Zhang san", "29", "Web Frontpage Manager"); var person2 = new person ("li si", "22", "Doktor"; person1.sayname ();; // Pop "Zhang san" console.log (Person2.Name) // Ausgabe "Li Si"

Methode 2: Object.create () Methode

Das Method Object.creat () als Alternative zum neuen Operator wird erst nach ES5 freigegeben. Mit dieser Methode ist eine "Klasse" ein Objekt, keine Funktion.

 var myMammal = {name: 'haut das Säugetier', get_name: function () {return this.name; }, sagt: function () {return this.saying || ''; }} var mycat = Object.create (myMammal); mycat.name = 'Henrietta'; mycat.saying = 'miow'; mycat.get_name = function () {console.log (this.says + ' + this.name + this.says);} mycat.name ();

Ausgabe:

 function () {return this.saying || ''; } Henriettafunction () {return this.saying || ''; }

Derzeit haben die neuesten Versionen der wichtigsten Browser (einschließlich IE9) diese Methode bereitgestellt. Wenn Sie auf einen alten Browser stoßen, können Sie den folgenden Code selbst zur Bereitstellung selbst verwenden.

 if (! object.create) {Object.create = Funktion (o) {Funktion f () {} f.prototype = o; Neue f () zurückgeben; }; }

Methode 3: Minimalistisches Gesetz

Paket

Diese Methode verwendet dies und den Prototyp nicht, und der Code ist sehr einfach zu bereitstellen. Erstens verwendet es auch ein Objekt, um "Klasse" zu simulieren. Definieren Sie in dieser Klasse einen Konstruktor -Creatfn (), um eine Instanz zu generieren.

 var dog = {creatfn: function () {// ein Code hier}};

Definieren Sie dann in CreateFn () ein Instanzobjekt und verwenden Sie dieses Instanzobjekt als Rückgabewert.

 var hunde = {creatfn: function () {var hunde = {}; hund.name = "hunde"; Dog.Makesound = function () { alert ("WoofwoofWoofWoofWoofWoofWoofwoofwoofwoofwoofwoofwoofwoofWoofWoofwoofWoofWoofWoofwoofWoofwoofWoofWoofWoofWoofWoofWoofWoofWW oofWooFWOOFWOOFWOFWOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOWWOWWO OFWOOFWOOFWOOFWOFWOOFWOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOFWOOFWOWWO OFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOODWOOD FWOFWOOFWOOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOOFWOFWOOFWOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOOWWOO fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof WoofWooFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOFWOFWOFWOFWOFWOOFWOFWOFWW oofWooFWOOFWOOFWOFWOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOFWOFWOFWOFWOOFWOOFWOOFWOOFWOOFWOFWOWWOWWO

Rufen Sie bei der Verwendung die Methode createFn () auf, um das Instanzobjekt zu erhalten.

 var dog1 = hunde.creatfn (); Dog1.Makesound (); // Woof

Der Vorteil dieses Ansatzes besteht darin, dass es leicht zu verstehen ist, eine klare und elegante Struktur hat und der traditionellen "objektorientierten Programmierkonstruktion" übereinstimmt, sodass die folgenden Merkmale leicht bereitgestellt werden können.

erben

Es ist sehr bequem, eine Klasse in der nächsten Klasse zu implementieren. Rufen Sie einfach die Methode createFn () in der Methode creatfn () auf. Definieren Sie zuerst eine Tierklasse.

 var Animal = {creatfn: function () {var Animal = {}; Animal.eat = function () {alert ("Essen essen"); }; Tiertier; }};

Dann wird in der Methode des Hundes Creatfn () die methode des Tiers aufgerufen.

 var hunde = {creatfn: function () {var hunde = animal.creatfn (); hund.name = "hunde"; Dog.Makesound = function () {alert ("Wangwoo"); }; Rückkehrhund; }};

Die auf diese Weise erhaltene Hundeberichtung erbt gleichzeitig die Hundeklasse und die Tierklasse.

 var dog1 = hunde.creatfn (); Dog1.eat (); // Mahlzeit essen

Private Eigenschaften und private Methoden

In der Methode creatfn (), solange die Methoden und Eigenschaften, die nicht auf dem Hundelement definiert sind, privat sind.

 var hunde = {creatfn: function () {var hunde = {}; var Sound = "Woof Woof"; Dog.Makesound = function () {alert (Sound); }; Rückkehrhund; }};

Der interne variable Klang im obigen Beispiel kann nicht extern gelesen werden und kann nur die öffentliche Methode Making () des Hundes durchlesen werden.

 var dog1 = hunde.creatfn (); ALERT (Dog1.Sound); // undefiniert

Datenaustausch

Manchmal brauchen wir alle Instanzobjekte, um dieselben internen Daten lesen und schreiben zu können. In diesem Zeitpunkt sind diese internen Daten zu diesem Zeitpunkt innerhalb des Klassenobjekts und außerhalb der Methode creatfn () zusammenfasst.

 var hunde = {sound: "wowangwoo", creatfn: function () {var hunde = {}; Dog.Makesound = function () {alert (dog.Sound); }; Dog.changesound = function (x) {dog.Sound = x; }; Rückkehrhund; }};

Dann werden zwei Instanzobjekte generiert:

 var dog1 = hunde.creatfn (); var dog2 = hunde.creatfn (); Dog1.Makesound (); // Woof

Wenn es zu diesem Zeitpunkt ein Instanzobjekt gibt und die gemeinsam genutzten Daten geändert werden, wird auch das andere Instanzobjekt betroffen.

 Dog2.Changesound ("Wuwuwu"); Dog1.Makesound (); // Wuwuwuwu

JS Erbe

In Bezug auf die Erbschaft stehen auch viele Informationen zur Anfrage im Internet zur Verfügung, aber viele Freunde verstehen es nicht ausführlich. Wenn es um Vererbung geht, können Sie die Informationen nicht überprüfen und plötzlich nicht in der Lage sein, den Grund zu erkennen. Dies zeigt, dass unser Grundwissen nicht solide genug ist. Nicht gründlich verstanden. Heute stehe ich auf der Grundlage meiner Vorgänger und lasst uns diese Erbschaft mit Ihnen überprüfen.

Die beiden am häufigsten verwendeten Vererbungsmethoden sind wie folgt:

• Prototyp -Kettenvererbung (Vererbung zwischen Objekten)
• Klassische Vererbung (Vererbung zwischen Konstruktoren)

Prototyp -Kettenvererbung

Was ist Prototyp -Kettenvererbung? Ich werde hier nicht über die Definition sprechen. In der Tat soll Prototyp zur Erben der Elternebene verwendet werden.

Zum Beispiel:

 Funktion Eltern () {this.name = 'mike';} function child () {this.age = 12;} child.Prototype = new Parent (); // Child ererbt Eltern und bildet eine Kette durch den Prototyp var test = new Child (); alert.age); alert.name (test.name). this.gewicht = 60;} brother.Prototype = new Child (); // Setzen Sie die Prototyp -Kette fort

Im obigen Beispiel wird durch den Prototyp eine Kette gebildet. Kind erbt Eltern. Bruder erbt Kind. Schließlich hat Bruder sowohl die Eigenschaften von Kind als auch Eltern sowie seine eigenen Eigenschaften. Dies ist das Erbe der ursprünglichen Kette.

Klassischer Vererbung (Ausleihenkonstruktor)

Das klassische Vererbung verwendet im Allgemeinen Anruf oder beantragt, den Supertyp -Konstruktor intern aufzurufen. Zum Beispiel:

 Funktion Eltern (Alter) {this.name = ['mike', 'Jack', 'Smith']; this.age = Age;} Funktion Child (Alter) {parent.call (this, age);} var test = neues Kind (21); alert (test.age); // 21alert (test.name); // mike, jack, smithtest.name.push ('bill'); alert (test.name); // mike, jack, jack, jack, jack, jack, jack

Die beiden obigen Vererben sind die grundlegendsten zwei Vererbungsmethoden.

Darüber hinaus gibt es einige Erbschaftsmethoden, schauen wir uns an!

Kombinationsvererbung

Die Kombinationsvererbung ist normalerweise die Vererbungsmethode, die in Kombination der beiden oben genannten Vererbungsmethoden verwendet wird.

Als Beispiel:

 Funktion Eltern (Alter) {this.name = ['mike', 'Jack', 'Smith']; this.age = age;} parent.prototype.run = function () {return this.name + 'sind beide' + this.age;}; Funktion child (Alter) {parent.call (this, age); // Objektimpersonation, Pass -Argumente in Supertyp} mild.Prototype = New Parent () // // -Prototyp -Kette in OK -Kette impehern. Alert (test.run ()); // Mike, Jack, Smith sind beide21

Prototyp -Vererbung

Es ist nur ein Wort, das sich von der oben erwähnten ursprünglichen Kette -Vererbung unterscheidet, aber nicht der gleiche Inhalt. Was wir über Prototypenerbanz sprechen, ist das, worüber wir in der letzten Klasse gesprochen haben und eine neue Klasse über die Object.Create () -Methode erstellen. Weil diese Methode nicht von alten Browsern unterstützt wird. Wenn wir also kein Objekt verwenden.Create (), kann es auch wie folgt eine alternative Methode geben:

 Funktion obj (o) {Funktion f () {} f.prototype = o; Neue f () zurückgeben; }

Diese Funktion implementiert die Art und Weise, wie wir Klasse in Object.create () erstellen!

Daher ist Folgendes:

 Funktion obj (o) {Funktion f () {} f.prototype = o; Neue f () zurückgeben; } var box = {name: 'trigkit4', arr: ['Bruder', 'Schwester', 'Baba']}; var b1 = obj (box); alert (b1.name); // trigkit4b1.name = 'mike'; alert (b1.name); // mikealert (b1.arr); // Bruder, Schwester, Babab1.arr.push ('Eltern'); alarm (b1.arr); // Bruder, Schwester, Baba, Elternvar B2 = Obj (Box); Alert (B2.Name);

Parasitäres Vererbung

Als Beispiel:

 Funktion createanother (ursprünglich) {var klone = neues Objekt (original); Clone.sayhi = function () {alert ("hi")}; return clone;} var person = {name: "haorooms", Freunde: ["hao123", "zhansan", "lisi"]} var AnotherPerson = Creatanother (Person); antherperson.sayhi (); // hi

Parasitäre Kombination

 Funktion InheritPrototype (Subtyp, SuperType) {var prototype = Object.creat (SuperType.Prototype); Prototyp.Constructor = Subtyp; subtype.prototype = prototype;}; Funktion SuperType (name) {this.name = name; this.colors = ['rot', 'blau', 'grün'];} SuperType.Prototype.sayname = function () {console.log (this.name); this.age = age;} // inheritPrototype (subtyp, superType); subtype.prototype.sayage = function () {console.log (this.age);} var instance = new subtype ();

Die Klassenvererbung sind im Grunde die oben genannten Methoden. Lassen Sie uns kurz über die Klasse von ES6 sprechen!

ES6 Implementierungsklasse

 // Klassenklassenpunkt definieren {Constructor (x, y) {this.x = x; this.y = y; } toString () {return '('+this.x+','+this.y+')'; }} var point = neuer Punkt (2, 3); point.toString () // (2, 3) point.hasownProperty ('x') // Truepoint.hasownProperty ('y') // trupoint.hasownproperty ('tostring') // Falschpoint.

Erbe der Klasse

 Class Colorpoint erweitert Punkt {Constructor (x, y, color) {Super (x, y); // Rufen Sie den Konstruktor (x, y) der übergeordneten Klasse this.color = color an; } toString () {return this.color + '' + super.toString (); // Rufen Sie den toString () der übergeordneten Klasse}} auf