Neue Funktionen von JavaScript ES6 verwenden neue Methoden, um die Klasse zu definieren

ES6 (ECMascript 6) ist der Standard für die bevorstehende neue Version von JavaScript Language, Codenamed Harmony (die Bedeutung von Harmonie ist offensichtlich nicht mit dem Tempo meines Landes Schritt, wir sind in die chinesische Traumversion eingetreten). Der letzte Standard wurde als ES5 formuliert, der 2009 ausgestellt wurde. Derzeit ist die Standardisierung von ES6 im Gange, und die offiziell abgeschlossene Version wird voraussichtlich im Dezember 2014 veröffentlicht. Die meisten Standards sind jedoch bereit, und die Unterstützung für ES6 durch Browser wird ebenfalls implementiert.

Der Weg zur Definition von Klassen in ES6 ist der Syntaxzucker für die Definition von Klassen in ES3 und ES5. Obwohl es einige Unterschiede gibt, ist die Gesamtmethode zur Definition von Klassen prägnanter und die Klassenvererbung bequemer. Wenn Sie sich mit der Vererbung in ES6 besser vertraut machen möchten, ist es am besten, die Methode des Prototypenerbschaft in ES5 zu verstehen. Es gibt viele Artikel im Blog -Park, in denen JS Erbe sagen. Schüler, die ein detailliertes Verständnis haben möchten, werden es selbst durchsuchen.

Definieren Sie eine Klasse:

Jede mit der Klassenmethode definierte Klasse hat standardmäßig eine Konstruktorfunktion. Diese Funktion ist die Hauptfunktion der Konstruktorfunktion. Dieser Innere des Funktionskörpers weist auf die erzeugte Instanz hin. Say () {} ist die Methode im Prototyp. Wir definieren eine einfache Klasse:

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; } Says () {console.log ("Say Hi"); }}; new Person (). say (); // Die Konsole gibt Ausgabe sagen hi

Hinweis: Die in ES6 deklarierte Klasse hat nicht das Problem der Funktionserklärung im Voraus. Die Klasse muss zuerst deklariert und dann verwendet werden, sonst tritt eine Ausnahme auf. Wir ändern nur die Codeposition in der obigen Demo und melden sofort einen Fehler. (Wenn Sie es mit dem Denken in ES5 verstehen, erklärt die deklarierte Klasse nicht im Voraus. Für Wissenspunkte über die Deklaration im Voraus ist die Klasse, die durch den Klassennamen {} deklariert ist, der VAR -Klasse name = function () {});

Führen Sie den folgenden Code aus

 "Strict"; New Person (). Say (); Klasse Person {Constructor (Name) {this.name = name; } Says () {console.log ("Say Hi"); }};

Statische Methoden zur Definition von Funktionen:

Wenn beim Definieren einer Funktion in den Klammern vor dem Funktionsnamen statisch deklariert wird, ist diese Funktion eine statische Funktion, eine statische Methode und hat nichts mit dem Prototyp zu tun:

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; } static Says () {console.log ("Say Hi"); }}; Person.say ();

Definieren Sie die Prototypmethode:

Definieren Sie die Prototypmethode und deklarieren Sie sie direkt wie folgt: Funktion name () {}, die Klammern sind Parameterliste und die Klammern sind Codeblöcke. Die Methode zur Definition des Prototyps in ES5 ist zu verwenden: Constructor.Prototyp. Prototyp -Methodenname () {}. Diese Schreibform ist sehr umständlich. Die Möglichkeit, den Prototyp mit ES6 zu definieren, ist ein bisschen wie Java und C#. Dies sind die Eigenschaften relativ hochrangiger Sprachen:

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; } Says () {console.log ("Say Hi"); } sing () {console.log ("lalalala"); }}; new Person (). say (); // Ausgabe: Sagen Sie Hinev Person (). Sing (); // Ausgabe: Lalalalala

Statische Eigenschaften und Prototypeigenschaften:

Es ist etwas schwierig, statische Eigenschaften nach Abschluss der Klassendefinition zu definieren. Der Sprachautor implementiert diese Methode, um Code -Verwirrung zu vermeiden. Alle statischen Eigenschaften sind an derselben Stelle definiert. Wie kann der Code also standardisierter sein?

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; }}; Person.Hands = 2; console.log (Person.Hands);

Attribute können im Prototyp nicht definiert werden. Wir können SET nur auf den Prototyp, den Wert und den Setter einstellen. Beachten Sie, dass Wert und Setter auf dem Prototyp stehen ...:

Führen Sie den folgenden Code aus

 Klasse Person {Constructor (_name) {this._name = _name; } get name () {return this._name; } set name (_name) {this._name = _name; }} var p = new Person (); P.Name = "heheda"; console.log (P.Name); // Ausgabe: hehedaconsole.log (p._name); // Ausgabe: Heheda

Wenn Sie ein Prototyp -Attribut definieren möchten, definieren Sie einfach das Attribut im Konstruktor. Wenn es vererbt wird, erbt die Unterklasse auch das Attribut der übergeordneten Klasse:

Führen Sie den folgenden Code aus

 Klasse Person {constructor () {this.name = "default"; }} class Man erweitert die Person {constructor () {Super (); }} console.log (neuer Man (). Name);

Die Vererbung erstreckt sich über die Klasse:

ES5 hat bereits Vererbung, aber diese Art von Erbe zirkuliert oft. Die ES6 -Vererbung basiert nur auf der Prototyp -Vererbungskapselung (Synonymzucker). Obwohl es in der Tat viel einfacher ist, ist das Java -Erbe leichter zu lernen. Sman im folgenden Demo -Beispiel bedeutet Superman, glaube nicht;

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; } Says () {console.log ("Say Hi"); gib dies zurück; }}; class sman erweitert Person {Constructor (Name, Power) {Super (Name); this.uperpower = power; } show () {console.log (this.superPower); gib dies zurück; }} console.log (neu Sman ("Clark", "Pee"). Show (). Say (). Name); // Ausgabe: Pee sagt Hallo Clark

Wenn Sie die Erbschaft verwenden möchten, muss Super () in der Unterklasse ausgeführt werden, um die übergeordnete Klasse anzurufen. Andernfalls wirft der Compiler einen Fehler auf. Super in der Unterklasse hat drei Funktionen. Die erste besteht darin, es direkt als Konstruktor aufzurufen, die zweite ist, als Instanz der übergeordneten Klasse zu wirken, und die dritte besteht darin, die statische Methode der übergeordneten Klasse in der statischen Methode in der Unterklasse aufzurufen.

Der Hauptunterschied zwischen ES6 -Vererbung und ES5 -Vererbung. Die häufig verwendete Vererbung in ES5 besteht darin, den Prototyp der Unterklasse als Instanz der übergeordneten Klasse festzulegen. Die Unterklasse hat natürlich alle Methoden und Eigenschaften der übergeordneten Klasse:

Führen Sie den folgenden Code aus

 var sup = function () {this.sub = true;}; sup.prototype.ProtosUp = {sup: "sup"}; var sub = function () {this.sub = true;}; sub.Prototype = new Sup (); // den Prototyp erben; Sub.Prototype.Constructor = sub; // Konstruktor beheben;

Die in ES6 implementierte Vererbung ist exquisitiver und wird von der übergeordneten Klasse nicht gestört. Diese Vererbung ist eine Kombination aus Antragsvererbung und Prototyp -Vererbungsimplementierung:

Führen Sie den folgenden Code aus

 var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.apply (dies); // Erben Sie die Eigenschaften und Methoden davon;}; sub .__ proto__ = sup; // die statischen Eigenschaften von SUP erben; Sub.Prototype = Object.create (sup.Prototype, {Konstruktor: {value: sub, Enumerable: false, beschreibbar: true, konfigurierbar: true}}); // die Prototypattribute erben und den Konstruktor überschreiben;

Es ist einfacher, den Unterschied zwischen den beiden mit Bildern zu erkennen, und das Bild zeigt den Unterschied zwischen der Vererbung zwischen ES5 und ES6: http://keenwon.com/1524.html;

ES5 simuliert die Erbschaft von ES6:

Aufgrund des Transcoder -Babels können wir den ES5 -Code verwenden, um zu untersuchen, wie die ES6 -Vererbung implementiert wird, und der ES6 -Vererbung:

Führen Sie den folgenden Code aus

 "Strict"; Class Person {Constructor (Name) {this.name = name; } Says () {console.log ("Say Hi"); gib dies zurück; }}; class sman erweitert Person {Constructor (Name, Power) {Super (Name); this.uperpower = power; } show () {console.log (this.superPower); gib dies zurück; }} console.log (neu Sman ("Clark", "Pee"). Show (). Say (). Name);

Nachdem der Code mit Babel in ES5 umgewandelt wurde, wurde er so. Ich habe selbst einen kleinen Kommentar hinzugefügt und mir vergebe, dass ich widerspenstige und liebevolle Freiheit war ...:

Führen Sie den folgenden Code aus

 var _createClass = function () {function defineProperties (Ziel, Props) {for (var i = 0; i <props.length; i ++) {var Descriptor = props [i]; Descriptor.Enumerable = Descriptor.Enumerable || FALSCH; Descriptor.Configurable = true; if ("Wert" im Deskriptor) Deskriptor.Wrable = true; Object.DefineProperty (Ziel, Deskriptor.Key, Deskriptor); }} Rückgabefunktion (Konstruktor, Protoprops, staticProps) {// den Prototyp if (Protoprops) DefineProperties (Constructor.Prototyp, Protoprops) kopieren; // die Eigenschaft kopieren, wenn (staticProps) definierte Properties (Konstruktor, staticProps); Konstruktor zurückgeben; }; } (); Funktion _classCallcheck (Instanz, Konstruktor) {if (! (Instanzinstanz des Konstruktors)) {neue Typeerror werfen ("kann eine Klasse nicht als Funktion aufrufen"); }} function _possibleconstructorreturn (self, call) {if (! self) {werfen neuer referenceError ("Dies wurde nicht initialisiert - Super () wurde nicht genannt"); } return Call && (Typof Call === "Objekt" || Typof Call === "Funktion")? Rufen Sie: Selbst; } // Folgendes ist der Code, der in ES6 erbt. _inherits implementiert die Vererbung des Prototyps und die Vererbung der Attribute der übergeordneten Klasse: Funktion _inherits (Unterklasse, Superklasse) {if (typeof superklasse! == "Funktion" && superklasse! } // Erben Sie den Prototyp der übergeordneten Klasse und korrigieren Sie den Konstruktor als Unterklasse; subclass.prototype = Object.create (SuperClass && SuperClass.Prototype, {Konstruktor: {Wert: Unterklasse, Aufzählbar: Falsch, beschreibbar: true, konfigurierbar: true}}); // __Proto__ für das Subklassenobjekt definieren, damit das statische Attribut -Vererbung erreicht werden kann; if (SuperClass) Objekt.setPrototype? Object.SetPrototypeof (Unterklasse, Superklasse): Unterklasse .__ Proto__ = SuperClass; // Der letzte wenn der Entwickler: Neue Unterklasse, der tatsächliche Zustand ist: Objekt {__Proto __: übergeordnete Klasse, Konstruktor: Unterklasse}}; /* var sup = function () {}; var sub = function () {}; _inherits (sub, sup); // die Bedeutung dieser Erbschaftsumsetzung; Als Unterklasse des Objekts erbelt die übergeordnete Klasse als Konstruktor die Unterklasse sub.Prototype .__ proto__ === Sup.Prototype // True sub.Prototype.Constructor === Sub; // True Sub .__ proto__ == Sup; this.name = name; } _createClass (Person, [{Schlüssel: "Say", Wert: Funktion Says () {console.log ("Say Hi"); Rückkehr Person; } (); ; var sman = function (_person) {_inherits (smaan, _person); Funktion Sman (Name, Power) {// zu diesem Zeitpunkt that this .__ Proto__ hat auf den Prototyp des Konstruktors _classCallcheck (this, smaan) hingewiesen; // Dieser Satz entspricht Super () in ES6, die Attribute der übergeordneten Klasse durch den Anruf übergeben und die Vererbung ausführen. var _this = _possibleconstructorreturn (this, Object.getPrototypeof (sman) .call (this, Name)); _this.superpower = power; // Dynamische Rückgabe _this; return _this; } _createClass (smaan, [{key: "show", value: function show () {console.log (this.superPower); return this;}}]); SMAN zurückkehren; }(Person); console.log (neu Sman ("Clark", "Pee"). Show (). Say (). Name);

Mehrfacherbschaft:

Verwenden Sie Mix-In, um mehrere Vererbung zu erreichen, und die Schreibmethode lautet: Class Sub Extendes Mix (OBJ0, OBJ1, OBJ2). Mix ist nur eine Methode, wir müssen diese Methode selbst definieren:

Führen Sie den folgenden Code aus

 <html> <kopf> <meta charset = "utf-8"> </head> <body> <Script> "Strict" verwenden "; Funktion mix (... mixins) {class mix {} für (mischen von mixins) {coproperties (mix, mixin); CopyProperties (Mix.Prototype, Mixin.Prototype); } return mix; } function coproperties (Ziel, Quelle) {für (lass taste von reflect.ownKeys (Quelle)) {if (key! == "Konstruktor" && key! == "prototype" && key! Object.DefineProperty (Ziel, Schlüssel, Desc); }}} class Man {Work () {console.log ("Working"); }} Klasse Frau {say () {console.log ("Say"); }} class Superman erweitert Mix (Mann, Frau) {constructor () {Super (); }} var sm = new Superman (); sm.work (); sm.say (); // Tatsächlich haben sie keine Erbschaftsbeziehung, sie kopieren nur die Attribute in die Unterklasse; console.log (SM Instanz des Menschen); console.log (sminstanceof woman); </script> </body> </html>

Das obige ist das relevante Wissen über die neuen Merkmale von JavaScript ES6, die der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!