Clases de React ES6
Clases
ES6 introdujo clases.
Una clase es un tipo de función, pero en lugar de usar la palabra clave
functionpara iniciarla, usamos la palabra clave
classy las propiedades se asignan dentro de un
constructor()método.
Ejemplo
Un constructor de clase simple:
class Car {
constructor(name) {
this.brand = name;
}
}
Observe el caso del nombre de la clase. Hemos comenzado el nombre, "Car", con un carácter en mayúscula. Esta es una convención de nomenclatura estándar para las clases.
Ahora puedes crear objetos usando la clase Car:
Ejemplo
Cree un objeto llamado "mycar" basado en la clase Car:
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Ford");
Nota: La función constructora se llama automáticamente cuando se inicializa el objeto.
¡Obtener la certificación!
$95 INSCRÍBETE
Método en Clases
Puede agregar sus propios métodos en una clase:
Ejemplo
Cree un método llamado "presente":
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
Como puede ver en el ejemplo anterior, llama al método haciendo referencia al nombre del método del objeto seguido de paréntesis (los parámetros irían dentro de los paréntesis).
Herencia de clase
Para crear una herencia de clase, utilice la extends
palabra clave.
Una clase creada con una herencia de clase hereda todos los métodos de otra clase:
Ejemplo
Cree una clase llamada "Modelo" que heredará los métodos de la clase "Coche":
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();
El super()método se refiere a la clase padre.
Al llamar al super()método en el método constructor, llamamos al método constructor del padre y obtenemos acceso a las propiedades y métodos del padre.
Para obtener más información sobre las clases, consulte nuestra sección Clases de JavaScript .