Herencia de clases de JavaScript
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(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= 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.
La herencia es útil para la reutilización del código: reutilice las propiedades y los métodos de una clase existente cuando cree una nueva clase.
Getters y Setters
Classes también le permite usar getters y setters.
Puede ser inteligente usar getters y setters para sus propiedades, especialmente si desea hacer algo especial con el valor antes de devolverlos o antes de configurarlos.
Para agregar getters y setters en la clase, use las palabras clave
gety set.
Ejemplo
Cree un getter y un setter para la propiedad "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Nota: incluso si el getter es un método, no usa paréntesis cuando desea obtener el valor de la propiedad.
El nombre del método getter/setter no puede ser el mismo que el nombre de la propiedad, en este caso carname.
Muchos programadores usan un carácter de subrayado _
antes del nombre de la propiedad para separar el getter/setter de la propiedad real:
Ejemplo
Puede usar el carácter de subrayado para separar el getter/setter de la propiedad real:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Para usar un setter , use la misma sintaxis que cuando establece un valor de propiedad, sin paréntesis:
Ejemplo
Use un setter para cambiar el nombre del automóvil a "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Izar
A diferencia de las funciones y otras declaraciones de JavaScript, las declaraciones de clase no se elevan.
Eso significa que debe declarar una clase antes de poder usarla:
Ejemplo
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Nota: para otras declaraciones, como funciones, NO obtendrá un error cuando intente usarla antes de que se declare, porque el comportamiento predeterminado de las declaraciones de JavaScript es elevar (mover la declaración a la parte superior).