Nuevas características de JavaScript ES6 Utilice nuevos métodos para definir la clase

ES6 (Ecmascript 6) es el estándar para la próxima versión nueva del lenguaje JavaScript, la armonía con nombre en código (el significado de la armonía obviamente no se mantiene al día con el ritmo de mi país, hemos entrado en la versión del sueño chino). El último estándar se formuló como ES5, que se emitió en 2009. Actualmente, la estandarización de ES6 está en progreso, y se espera que la versión oficialmente finalizada se lance en diciembre de 2014. Pero la mayoría de los estándares están listos, y también se está implementando el soporte para ES6 por los navegadores.

La forma de definir clases en ES6 es el azúcar de sintaxis para definir clases en ES3 y ES5. Aunque hay algunas diferencias, la forma general de definir clases es más concisa y la herencia de clase es más conveniente. Si desea estar más familiarizado con la herencia en ES6, es mejor comprender el método de herencia prototipo en ES5. Hay muchos artículos en el Blog Park que dicen la herencia JS. Los estudiantes que quieran tener una comprensión profunda lo buscarán ellos mismos;

Defina una clase:

Cada clase definida utilizando el método de clase tiene una función de constructor de forma predeterminada. Esta función es la función principal de la función del constructor. Esto dentro del cuerpo de la función apunta a la instancia generada. Say () {} es el método en el prototipo. Definimos una clase simple:

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; } Says () {console.log ("Di hola"); }}; nueva persona (). say (); // La consola emitirá saludar

Nota: La clase declarada en ES6 no tiene el problema de la declaración de función por adelantado. La clase debe declararse primero y luego usarse, de lo contrario ocurrirá una excepción. Simplemente cambiamos la posición del código en la demostración anterior e informamos un error de inmediato. (Si lo entiende con el pensamiento en ES5, la clase declarada no declara de antemano. Para los puntos de conocimiento sobre la declaración de antemano, la clase declarada a través del nombre de clase {} es la clase var name = function () {});

Ejecutar el siguiente código

 "Use Strict"; New Person (). Say (); Class Person {Constructor (name) {this.name = name; } Says () {console.log ("Di hola"); }};

Métodos estáticos para definir funciones:

Si la estática se declara en los aparatos ortopédicos antes del nombre de la función al definir una función, entonces esta función es una función estática, un método estático, y no tiene nada que ver con el prototipo:

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; } static Says () {console.log ("DI SI HI"); }}; Persona.say ();

Defina el método de prototipo:

Defina el método prototipo y declararlo directamente de esta manera: Name de la función () {}, los soportes son la lista de parámetros, y los aparatos ortopédicos son bloques de código. El método para definir el prototipo en ES5 es usar: constructor.prototype. Nombre del método prototipo () {}. Esta forma de escritura es muy engorrosa. La forma de definir el prototipo usando ES6 es un poco como Java y C#. Estas son las características de los idiomas de nivel relativamente alto:

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; } Says () {console.log ("Di hola"); } sing () {console.log ("lalalala"); }}; nueva persona (). say (); // Salida: Say Hinev Person (). Sing (); // Salida: Lalalalala

Propiedades estáticas y propiedades prototipo:

Es un poco difícil definir propiedades estáticas después de que se complete la definición de clase. El autor del lenguaje implementa este método para evitar la confusión del código. Todas las propiedades estáticas se definen en el mismo lugar, entonces, ¿cómo puede el código estar más estandarizado?

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; }}; Persona.hands = 2; console.log (persona.hands);

Los atributos no se pueden definir en el prototipo. Solo podemos definir SET y obtener el prototipo, el valor y el setter. Tenga en cuenta que el valor y el setter están en el prototipo ...:

Ejecutar el siguiente código

 Persona de clase {constructor (_name) {this._name = _name; } get name () {return this._name; } set nombre (_name) {this._name = _name; }} var p = nueva persona (); p.name = "jeheda"; console.log (p.name); // Salida: hehedaconsole.log (p._name); // Salida: Heheda

Si desea definir un atributo prototipo, simplemente defina el atributo dentro del constructor. Si se hereda, la subclase también heredará el atributo de la clase principal:

Ejecutar el siguiente código

 Persona de clase {constructor () {this.name = "default"; }} El hombre de clase extiende a la persona {constructor () {super (); }} console.log (nuevo hombre (). Nombre);

La herencia se extiende de la clase:

ES5 ya tiene herencia, pero este tipo de herencia a menudo circula. La herencia ES6 solo se basa en la encapsulación de herencia prototipo (azúcar del sinónimo). Aunque de hecho es mucho más simple, la herencia de Java es más fácil de aprender. Sman en el siguiente ejemplo de demostración significa Superman, no lo pienses;

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; } Says () {console.log ("Di hola"); devolver esto; }}; clase sman extiende a la persona {constructor (nombre, potencia) {super (nombre); this.superPower = power; } show () {console.log (this.superPower); devolver esto; }} console.log (nuevo sman ("Clark", "Pee"). Show (). Say (). Nombre); // Salida: Pee dice hola Clark

Si desea usar la herencia, Super () debe ejecutarse en la subclase para llamar a la clase principal. De lo contrario, el compilador lanzará un error. Super en la subclase tiene tres funciones. El primero es llamarlo directamente como un constructor, el segundo es actuar como una instancia de la clase principal, y el tercero es llamar al método estático de la clase principal en el método estático en la subclase;

La principal diferencia entre la herencia ES6 y la herencia ES5. La herencia comúnmente utilizada en ES5 es establecer el prototipo de la subclase como una instancia de la clase principal. La subclase naturalmente tiene todos los métodos y propiedades de la clase principal:

Ejecutar el siguiente código

 var sup = function () {this.sub = true;}; sup.prototype.proTosup = {sup: "sup"}; var = function () {this.sub = true;}; sub.prototype = new sup (); // heredar el prototipo; Sub.prototype.constructor = sub; // arreglar constructor;

La herencia implementada en ES6 es más exquisita y no será perturbada por la clase principal. Esta herencia es una combinación de herencia aplicada e implementación de herencia de prototipo:

Ejecutar el siguiente código

 var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.apply (esto); // heredar las propiedades y métodos de esto;}; sub .__ proto__ = sup; // heredar las propiedades estáticas de SUP; Sub.prototype = object.create (sup.prototype, {constructor: {value: sub, enumerable: false, witable: true, configurable: true}}); // heredar los atributos del prototipo y sobrescribir el constructor;

Es más fácil ver la diferencia entre las dos con imágenes, y la imagen muestra la diferencia entre la herencia entre ES5 y ES6: http://keenwon.com/1524.html;

ES5 simula la herencia de ES6:

Debido al transcodificador Babel, podemos usar el código ES5 para explorar cómo se implementa la herencia ES6 y la herencia ES6:

Ejecutar el siguiente código

 "Use Strict"; Class Person {Constructor (name) {this.name = name; } Says () {console.log ("Di hola"); devolver esto; }}; clase sman extiende a la persona {constructor (nombre, potencia) {super (nombre); this.superPower = power; } show () {console.log (this.superPower); devolver esto; }} console.log (nuevo sman ("Clark", "Pee"). Show (). Say (). Nombre);

Después de usar Babel para convertirlo en ES5, el código se convirtió en este. Agregué un pequeño comentario, perdóname por ser la libertad rebelde y amorosa ...:

Ejecutar el siguiente código

 var _createClass = function () {function DefineProperties (target, props) {for (var i = 0; i <props.length; i ++) {var descriptor = props [i]; descriptor.enumerable = descriptor.enumerable || FALSO; descriptor.configurable = true; if ("valor" en descriptor) descriptor.writable = true; Objeto.defineProperty (Target, Descriptor.Key, Descriptor); }} función de retorno (constructor, protoProprops, staticprops) {// Copiar el prototipo if (protoProprops) DefineProperties (constructor.prototype, protoProprops); // Copiar la propiedad if (staticprops) DefineProperties (constructor, staticprops); Constructor de retorno; }; } (); function _classCallCheck (instancia, constructor) {if (! (instancia instanciaf constructor)) {throle new typeError ("no se puede llamar a una clase como una función"); }} función _PossiblEConstructorReturn (self, call) {if (! self) {throw new referenceError ("Esto no se ha inicializado - Super () no se ha llamado"); } return Call && (typeOf Call === "Object" || typeOf Call === "función")? llamar: yo mismo; } // El siguiente es el código expresado en ES6 heredes. _Enherits implementa la herencia del prototipo y la herencia de los atributos de estado de clase principal: function _inherits (subclass, superclass) {if (typeof superclase! == "function" && superclase! == null) {tire typeerRor ("Super Expression debe ser nulo o una función, no" + typeOf SuperClass); } // heredar el prototipo de la clase principal y corregir el constructor como subclase; subclass.prototype = object.create (superclass && superclass.prototype, {constructor: {value: subclass, enumerable: false, witable: true, configurable: true}}); // Defina __proto__ para el objeto de subclase, de modo que se pueda lograr la herencia de atributos estáticos; if (superclass) object.setPrototypeOf? Object.setPrototypeOf (subclase, superclase): subclass .__ proto__ = superclass; // El último si el desarrollador: nueva subclase, el estado real es: objeto {__proto __: clase principal, constructor: subclase}}; /* var sup = function () {}; var sub = function () {}; _Enherits (sub, sup); // El significado de esta implementación de herencia; Como una subclase del objeto hereda la clase principal, como constructor, la subclase hereda el sub.prototype .__ proto__ === sup.prototype // true sub.prototype.constructor === sub; // true sub .__ proto__ === sup; // true */var persona = function = function {personaje de function (name) {_classcallcallcall (this, this, this); this.name = name; } _createClass (persona, [{clave: "decir", valor: function says () {console.log ("decir hola"); devuelve esto;}}]); persona de regreso; } (); ; var sman = function (_person) {_inherits (sman, _person); función sman (nombre, potencia) {// en este momento este .__ Proto__ ha señalado el prototipo del constructor _classCallCheck (this, sman); // Esta oración es equivalente a Super () en ES6, pasando los atributos de la clase principal a través de la llamada y ejecutando herencia; var _THIS = _POSSIBLEConstructorReturn (this, object.getProTotypeOf (sman) .call (this, nombre)); _THIS.SuperPower = Power; // return dinámico _THIS; return _This; } _createClass (sman, [{clave: "show", valor: function show () {console.log (this.superPower); devuelve esto;}}]); devolver sman; }(Persona); console.log (nuevo sman ("Clark", "Pee"). Show (). Say (). Nombre);

Herencia múltiple:

Use la mezcla para lograr la herencia múltiple, y el método de escritura es: Class Sub extiende la mezcla (OBJ0, OBJ1, OBJ2). La mezcla es solo un método, necesitamos definir este método nosotros mismos:

Ejecutar el siguiente código

 <html> <head> <meta charset = "utf-8"> </head> <body> <script> "use estrict"; function mix (... mixins) {class mix {} para (dejar mezcla de mezclas) {copyproperties (mix, mixin); copyProperties (mix.prototype, mixin.prototype); } mix de retorno; } función copyproperties (target, fuente) {for (let key de reflej.ownkeys (fuente)) {if (key! == "constructor" && key! == "prototipo" && key! == "name") {let desc = objet.getOwnPropertyDescriptoror (fuente, tecla); Objeto.defineProperty (Target, Key, Desc); }}} class Man {work () {console.log ("trabajar"); }} mujer mujer {say () {console.log ("decir"); }} clase Superman extiende mix (hombre, mujer) {constructor () {super (); }} var sm = new Superman (); sm.Work (); sm.say (); // De hecho, no tienen una relación de herencia, simplemente copian los atributos a la subclase; console.log (sm instancia de hombre); console.log (SM InstanceOf Woman); </script> </body> </html>

Lo anterior es el conocimiento relevante sobre las nuevas características de JavaScript ES6 que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!