Les nouvelles fonctionnalités de JavaScript ES6 utilisent de nouvelles méthodes pour définir la classe

ES6 (ECMAScript 6) est la norme pour la nouvelle version à venir de JavaScript Language, le nom de code Harmony (le sens de l'harmonie ne suit évidemment pas le rythme de mon pays, nous sommes entrés dans la version de rêve chinois). La dernière norme a été formulée comme ES5, qui a été publiée en 2009. Actuellement, la normalisation de l'ES6 est en cours, et la version officiellement finalisée devrait être publiée en décembre 2014. Mais la plupart des normes sont prêtes, et le support pour ES6 par les navigateurs est également mis en œuvre.

Le moyen de définir les classes dans ES6 est le sucre de syntaxe pour définir les classes dans ES3 et ES5. Bien qu'il existe certaines différences, la façon globale de définir les classes est plus concise et l'héritage des classes est plus pratique. Si vous voulez être plus familier avec l'héritage dans ES6, il est préférable de comprendre la méthode de l'héritage prototype dans ES5. Il existe de nombreux articles dans le parc du blog qui disent que JS a l'héritage. Les étudiants qui veulent avoir une compréhension approfondie le fouilleront eux-mêmes;

Définissez une classe:

Chaque classe définie à l'aide de la méthode de classe a une fonction de constructeur par défaut. Cette fonction est la fonction principale de la fonction du constructeur. Cet à l'intérieur du corps de fonction pointe vers l'instance générée. Say () {} est la méthode du prototype. Nous définissons une classe simple:

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; } dit () {console.log ("dire salut"); }}; new personne (). Say (); // La console sortira dire salut

Remarque: La classe déclarée dans ES6 n'a pas le problème de la déclaration de fonction à l'avance. La classe doit d'abord être déclarée puis utilisée, sinon une exception se produira. Nous modifions simplement la position du code dans la démo ci-dessus et rapportons immédiatement une erreur. (Si vous le comprenez avec la réflexion dans ES5, la classe déclarée ne déclare pas à l'avance. Pour les points de connaissance de la déclaration à l'avance, la classe déclarée via le nom de classe {} est la classe var nom = function () {});

Exécutez le code suivant

 "Utiliser Strict"; new Person (). Say (); class Person {constructor (name) {this.name = name; } dit () {console.log ("dire salut"); }};

Méthodes statiques pour définir les fonctions:

Si statique est déclarée dans les accolades avant le nom de la fonction lors de la définition d'une fonction, cette fonction est une fonction statique, une méthode statique, et n'a rien à voir avec le prototype:

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; } statique dit () {console.log ("dire salut"); }}; Personne.say ();

Définissez la méthode du prototype:

Définissez la méthode du prototype et déclarez-le directement comme ceci: Nom de la fonction () {}, les supports sont la liste des paramètres et les accolades sont des blocs de code. La méthode pour définir le prototype dans ES5 est à utiliser: Constructor.prototype. Nom de la méthode prototype () {}. Ce formulaire d'écriture est très lourd. La façon de définir le prototype à l'aide d'ES6 est un peu comme Java et C #. Ce sont les caractéristiques des langues de niveau relativement élevé:

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; } dit () {console.log ("dire salut"); } sing () {console.log ("Lalalala"); }}; new personne (). Say (); // Sortie: disons hinev personne (). Sing (); // Sortie: Lalalala

Propriétés statiques et propriétés prototypes:

Il est un peu difficile de définir les propriétés statiques une fois la définition de classe terminée. L'auteur linguistique implémente cette méthode pour éviter la confusion du code. Toutes les propriétés statiques sont définies au même endroit, alors comment le code peut-il être plus standardisé?

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; }}; Personne.hands = 2; console.log (personne.hands);

Les attributs ne peuvent pas être définis sur le prototype. Nous ne pouvons définir que Set et monter sur le prototype, la valeur et le secteur. Notez que la valeur et le secteur sont sur le prototype ...:

Exécutez le code suivant

 classe de classe {constructeur (_name) {this._name = _name; } get name () {return this._name; } set name (_name) {this._name = _name; }} var p = new personne (); p.name = "heheda"; console.log (p.name); // sortie: hehedaconsole.log (p._name); // Sortie: Heheda

Si vous souhaitez définir un attribut prototype, définissez simplement l'attribut à l'intérieur du constructeur. S'il est hérité, la sous-classe héritera également de l'attribut de la classe parent:

Exécutez le code suivant

 classe de classe {constructor () {this.name = "default"; }} class man étend la personne {constructor () {super (); }} console.log (new man (). name);

Inhérence étend de la classe:

ES5 a déjà l'héritage, mais ce type d'héritage circule souvent. L'héritage ES6 est uniquement basée sur l'encapsulation de l'héritage prototype (sucre synonyme). Bien qu'il soit en effet beaucoup plus simple, l'héritage de Java est plus facile à apprendre. Sman dans l'exemple de démonstration suivant signifie Superman, ne le pensez pas;

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; } dit () {console.log ("dire salut"); retourner ceci; }}; class Sman étend la personne {constructeur (nom, puissance) {super (name); this.superpower = puissance; } show () {console.log (this.superpower); retourner ceci; }} console.log (new Sman ("Clark", "Pee"). Show (). Say (). Nom); // Sortie: Pee dit Salut Clark

Si vous souhaitez utiliser l'héritage, super () doit être exécuté dans la sous-classe pour appeler la classe parent. Sinon, le compilateur lancera une erreur. Super dans la sous-classe a trois fonctions. La première consiste à l'appeler directement en tant que constructeur, la seconde consiste à agir comme une instance de la classe parent, et la troisième consiste à appeler la méthode statique de la classe parent dans la méthode statique de la sous-classe;

La principale différence entre l'héritage ES6 et l'héritage ES5. L'héritage couramment utilisé dans ES5 est de définir le prototype de la sous-classe comme instance de la classe parent. La sous-classe a naturellement toutes les méthodes et propriétés de la classe parent:

Exécutez le code suivant

 var sup = function () {this.sub = true;}; sup.prototype.protosup = {sup: "sup"}; var sub = function () {this.sub = true;}; sub.prototype = new sup (); // hériter du prototype; Sub.prototype.constructor = sub; // Correction du constructeur;

L'héritage implémenté dans ES6 est plus exquis et ne sera pas dérangé par la classe parent. Cet héritage est une combinaison d'application de l'héritage et de la mise en œuvre de l'héritage du prototype:

Exécutez le code suivant

 var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.Apply (ceci); // hériter des propriétés et des méthodes de cela;}; sub .__ proto__ = sup; // hériter des propriétés statiques de SUP; Sub.prototype = object.create (sup.prototype, {constructeur: {valeur: sub, énumérable: false, écrivable: true, configurable: true}}); // hériter des attributs du prototype et écraser le constructeur;

Il est plus facile de voir la différence entre les deux avec des images, et l'image montre la différence entre l'héritage entre ES5 et ES6: http://keenwon.com/1524.html;

ES5 simule l'héritage d'ES6:

En raison du transcoder Babel, nous pouvons utiliser le code ES5 pour explorer comment l'hérédité ES6 est implémentée et l'hérédité ES6:

Exécutez le code suivant

 "Utiliser Strict"; classe de classe {constructeur (nom) {this.name = name; } dit () {console.log ("dire salut"); retourner ceci; }}; class Sman étend la personne {constructeur (nom, puissance) {super (name); this.superpower = puissance; } show () {console.log (this.superpower); retourner ceci; }} console.log (new Sman ("Clark", "Pee"). Show (). Say (). Nom);

Après avoir utilisé Babel pour le convertir en ES5, le code est devenu comme ça. J'ai ajouté un petit commentaire moi-même, pardonne-moi d'être indiscipliné et aimant la liberté ...:

Exécutez le code suivant

 var _createClass = function () {fonction defineProperties (cible, props) {for (var i = 0; i <props.length; i ++) {var descriptor = props [i]; Descriptor.Enumerable = Descriptor.Enumerable || FAUX; Descriptor.Configurable = true; if ("valeur" dans descripteur) Descriptor.Witable = true; Object.defineProperty (Target, Descriptor.Key, Descriptor); }} Fonction de retour (constructeur, protoprops, staticprops) {// Copiez le prototype if (protoprops) DefineProperties (constructor.prototype, protoprops); // Copiez la propriété if (staticProps) DefineProperties (constructeur, staticprops); constructeur de retour; }; } (); function _classCallCheck (instance, constructeur) {if (! (instance instanceof constructor)) {throw new typeError ("ne peut pas appeler une classe comme une fonction"); }} fonction _PossibleConstructorRreturn (self, appel) {if (! self) {throw new ReferenceError ("Cela n'a pas été initialisé - super () n'a pas été appelé"); } return compall && (typeof call === "Object" || Typeof Call === "Function")? Appel: soi; } // Ce qui suit est le code exprimé dans ES6 Hérite. _Inherits implémente l'héritage du prototype et l'héritage des attributs d'état de la classe parent: fonction _inherits (sous-classe, superclass) {if (typeof superclass! == "function" && superclass! == Null) {lancez new typeError ("super expression doit être nul ou une fonction, pas" + type de superclasse); } // Hériter du prototype de la classe parent et corrigez le constructeur en tant que sous-classe; sous-classe.prototype = objet.create (superclass && superclass.prototype, {constructeur: {valeur: sous-classe, énumérable: false, écrivable: true, configurable: true}}); // Définissez __proto__ pour l'objet sous-classe, afin que l'héritage d'attribut statique puisse être réalisé; if (superclass) object.setprototypeof? Object.setprototypeof (sous-classe, superclasse): sous-classe .__ proto__ = superclass; // le dernier si le développeur: nouvelle sous-classe, l'état réel est: objet {__proto __: classe parent, constructeur: sous-classe}}; / * var sup = function () {}; var sub = function () {}; _inherits (sub, sup); // la signification de cette mise en œuvre de l'héritage; En tant que sous-classe de l'objet hérite de la classe parent, en tant que constructeur, la sous-classe hérite sub.prototype .__ Proto__ === Sup.prototype // true sub.prototype.constructor === sub; // true sub .__ Proto__ === Sup; // true * / var person = function () {function personne (nom) {_classcallck (this, personne) {fonction personne (nom) { this.name = name; } _CreateClass (personne, [{key: "Say", value: function dise () {console.log ("Say hi"); renvoie ceci;}}]); personne de retour; } (); ; var sman = function (_person) {_Inherits (SMAN, _PERSON); Fonction Sman (nom, puissance) {// À l'heure actuelle, ce .__ Proto__ a indiqué le prototype du constructeur _classCallCheck (this, SMAN); // Cette phrase est équivalente à super () dans ES6, passant les attributs de la classe parent via l'appel et exécutant l'héritage; var _This = _PossibleConstructorRreturn (this, object.getPrototypeOf (SMAN) .Call (this, name)); _Te.SuperPower = Power; // Retour dynamique _Ce; Retour _This; } _CreateClass (SMAN, [{key: "show", value: function show () {console.log (this.superpower); return this;}}]); retourner SMAN; }(Personne); console.log (new Sman ("Clark", "Pee"). Show (). Say (). Nom);

Héritage multiple:

Utilisez le mix-in pour obtenir un héritage multiple, et la méthode d'écriture est: Class Sub étend le mix (Obj0, Obj1, Obj2). Le mélange n'est qu'une méthode, nous devons définir cette méthode nous-mêmes:

Exécutez le code suivant

 <html> <éadfr> <méta charse = "utf-8"> </-head> <body> <script> "Utiliser strict"; Fonction mix (... mixins) {class mix {} for (let mixin of mixins) {copyproperties (mix, mixin); CopyProperties (mix.prototype, mixin.prototype); } return mix; } fonction copyproperties (cible, source) {for (let key of Reflect.ownkeys (source)) {if (key! == "Constructor" && key! == "prototype" && key! == "name") {let desc = object.getownpropertyDescriptor (source, key); Object.defineProperty (cible, key, desc); }}} classe man {work () {console.log ("travail"); }} classe féminine {say () {console.log ("dire"); }} classe Superman étend Mix (homme, femme) {constructeur () {super (); }} var sm = new Superman (); sm.work (); sm.say (); // En fait, ils n'ont pas de relation d'héritage, ils copient simplement les attributs à la sous-classe; console.log (instance sm man); console.log (instance sm femme); </cript> </ body> </html>

Ce qui précède est la connaissance pertinente sur les nouvelles fonctionnalités de JavaScript ES6 que l'éditeur vous a introduit. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!