1 Clase en ES6
ES6 propuso el concepto de clase (clase), por lo que la redacción es más a una escritura lenguaje orientado a objetos objeto prototipo. ES6 definido por la clase de objeto, teniendo el método constructor defecto y personalizados métodos, los métodos contenidos en la clase no se pueden enumerar.
class Point{
constructor(){
this.x=x;
this.y=y;
}
toString(){
return this.x+this.y;
}
}Nota: constructor correspondiente a la ES5 método constructor, la creación de un método de clase no requiere el uso de la tecla de función, el método no requiere separados por comas.
modo de combinación ES5 y utilizando el modelo de prototipo constructor, constructor modelo se utiliza para definir una instancia de objeto atributos definidos, el modelo prototipo se utiliza para definir un método de compartir un atributos compartidos, para ahorrar memoria, y los parámetros de paso apoyo al constructor.
function Point (x,y){
this.x=x;
this.y=y;
}
Point.prototype.toString= function(){
return this.x+this.y;
}
2 ES5 y ES6 crear una instancia de un objeto y se comparan
. 1) constructor de persona a persona ES5 y la instancia del objeto prototipo y Persona1, Person2 la relación: atributos prototipo constructor y de instancia de atributo __proto__ objeto de punto de prototipo, las propiedades de constructor de los puntos de objeto prototipo al constructor.
constructor prototipo (prototipo) Propiedad aún existen en ES6 en esto y ES5 como: métodos de clase se definen en la clase prototipo (prototipo), llame al método en la instancia de la clase anterior, es en realidad un método en un prototipo llamado.
//实例的constructor方法就是类的原型(prototype)的constructor方法
class B{
constructor(){}
}
let b = new B();
console.log(b.constructor === B.prototype.constructor);//true
Clase 2) ES6 puede ser visto como otro constructor manera (el constructor y ES5 no son método constructor equivalente): clase es el tipo de función, las propiedades propio prototipo clase de objeto constructor y clase dirigida, que ES5 el mismo.
class Point{
// ...
}
console.log(typeof Point) // "function"
console.log(Point === Point.prototype.constructor) // true
3) utilizando la clase crea una instancia de un objeto es el uso de nuevos comandos directamente a la clase, en consonancia con la ES5 uso en el constructor.
4) dentro de un métodos de la clase no se enumeran, esto y ES5 diferente.
. 5) método constructor de
una clase debe tener un método constructor, si no se añade constructor por defecto () {}. A pesar de que la clase es una función, pero ES5 y diferente, no directamente por llamar a la clase dará lugar a nuevos tipos de error, que esta función sólo tiene sentido si nuevos y usados juntos.
Ejemplo 6) clase
y ES5 misma instancia atributo menos que se defina explícitamente en y de sí mismo (es decir, este objeto se define en a), o se definen (es decir, definido en la clase) en el prototipo.
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // trueCódigo anterior, x e y son las instancias de un punto objeto propiedades propias (como se define en esta variable), el flujo vuelve al verdadero método hasOwnProperty, las propiedades del objeto prototipo es toString (como se define en Point), devuelve el método hasOwnProperty falsa. Estos son consistentes con el comportamiento de ES5.
ES5 y como parte de todas las instancias del objeto prototipo de clase.
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__
//true
__Proto__ propiedad puede ser reducido mediante la adición de casos de método de clase, después de todo de los prototipos han aumentado este método, ya que y ES5.
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
7) Variable de clase ascensor (elevador) no existe, es completamente diferente y ES5.
new Foo(); // ReferenceError
class Foo {}En el código anterior, usando la primera clase Foo, después de la definición, lo que se da, debido a que la declaración de la clase ES6 no subió a la cabeza del código. La razón de tal disposición relativa a la sucesión, debe asegurarse de que la definición subclase después de la clase padre.
8) El modo estricto
clases y módulos interiores, el modo por defecto es estricta, por lo que no es necesario especificar el modo estricto el uso de la operación. Mientras se escribe código en la clase o módulo de sólo el modo estricto está disponible. Teniendo en cuenta todo el código en el futuro, que se está ejecutando en el módulo y así ES6 realidad actualizar todo el idioma en el modo estricto.
herencia 3 ES6 Clase
Clase logra mediante la palabra clave extends para heredar, y ES5 logra esto mediante la modificación de la cadena de prototipo diferente herencia (Casualmente, el estilo de la herencia SASS también lograrse mediante @extend):
class ColorPoint extends Point{}La subclase debe llamar al método de super en el método constructor, de lo contrario será error al crear una nueva instancia. Esto se debe a la subclase no posee este objeto, pero este objeto hereda la clase padre, entonces su procesamiento. Si no llama al método estupendo, la subclase no va a conseguir este objetivo.
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // super代表父类原型，调用父类的toString()
}
}En el código anterior, y entre el método constructor métodos toString han surgido palabra clave super , donde se muestra la estructura de la clase padre, este objeto se utiliza para crear una nueva clase padre.
palabra clave super, ya sea en función del uso, también se puede utilizar como un objetivo. El primer caso, como una llamada a la función super tiempo, en nombre del constructor de la clase padre, sólo se puede utilizar en el constructor de la subclase. constructor ES6 reclamo subclase debe realizar un super funciones. El segundo caso, cuando un objeto súper refiere al objeto en nombre de la clase prototipo de los padres.
ES5 herencia, en esencia, es la creación de una instancia de objeto de esta subclase, a continuación, añadir a esta clase padre anteriormente (Parent.apply (este)). (ES5 través del modo de herencia de prototipo: crear una subclase, y luego ejemplo de asignación de la clase padre a prototipo clase hija, que es una subclase reescribir el prototipo y se sustituye por un nuevo tipo de instancia.) Mecanismo ES6 herencia es completamente diferente, la esencia de esta es la primera instancia de un objeto para crear la clase padre (primero debe llamar al método súper), a continuación, utilizar el constructor de la subclase modificar esta.
Si el niño no define el método constructor de la clase, que se agrega de forma predeterminada. En el constructor de la subclase, sólo después de llamar a super, puede utilizar esta palabra clave, de lo contrario será error . Esto se debe a la construcción de una instancia de la subclase, se basa en la instancia de proceso padre, sólo el método súper devolver la instancia de la clase padre.
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}Y ES5 como instancias creadas por una subclase es una instancia de la clase padre y la subclase:
let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true
4 suplemento
1) atributos de clase de prototipo y la propiedad __proto__ (no entender esto, también alrededor.)
ES5 __proto__ cada objeto tiene atributos, punto de propiedad prototipo constructor correspondiente. ES6 ningún constructor, constructor de la clase como el azúcar sintáctica, mientras que la propiedad la propiedad prototipo __proto__ y, al mismo tiempo, hay dos cadenas herencia.
(1) subclases de atributos __proto__, la herencia representa un constructor, siempre apunta a la clase padre.
(2) __proto__ propiedades de las subclases de propiedad prototipo, métodos heredados expresadas, la propiedad prototipo siempre apunta a la clase padre.
Estos resultados debido a que la herencia de clases se lleva a cabo de acuerdo al siguiente modo.
class A {
}
class B {
}
// B的实例继承A的实例
Object.setPrototypeOf(B.prototype, A.prototype);
const b = new B();
// B的实例继承A的静态属性
Object.setPrototypeOf(B, A);
const b = new B();
Esta herencia dos cadenas se pueden entender: como un objeto, prototipo (las propiedades __proto__) subclase (b) es la clase principal (A); como un constructor, prototipo (atributos prototipo) subclase (B) es ejemplos de la clase padre.
2) Object.getPrototypeOf
Object.getPrototypeOf método se puede utilizar para obtener de la subclase de la clase padre.
Object.getPrototypeOf(ColorPoint) === Point
// truePor lo tanto, este método puede ser utilizado se determina, si una clase hereda de otra clase.
__proto__ propiedad 3) del Ejemplo
__proto__ el alojamiento __proto__ subclase ejemplo, propiedades de punto __proto__ de la instancia de la clase padre. Es decir, el prototipo del prototipo de la instancia de la subclase es el caso del prototipo de la clase padre.
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
En general, ES6 es cambiar la forma de ES5, el contenido verdadero se mantiene sin cambios, en esencia, es todavía un prototipo por la cadena de herencia.