Herencia de clases de JavaScript

Herencia de clase

Para crear herencia de clase, utilice extends Palabra clave.

Los objetos de clase heredados por la creación de clase heredan todos los métodos de otra clase:

Instancia

Crear una clase llamada "Model" que herede los métodos de la clase "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Tengo un ' + 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();

Pruebe usted mismo

super() método hace referencia a la clase padre.

Al llamar en el método constructor super() Métodos, llamamos al método constructor del padre para obtener el acceso a las propiedades y métodos del padre.

La herencia es útil para la reutilización del código: al crear una nueva clase, reutilice las propiedades y métodos de una clase existente.

Getter y Setter

La clase también le permite usar getter y setter.

Es inteligente usar getter y setter para sus propiedades, especialmente si desea hacer algo especial con el valor antes de devolverlo o establecerlo.

Para agregar getter y setter a una clase, utilice get y set Palabra clave.

Instancia

Cree getter y setter para el atributo "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;

Pruebe usted mismo

Notas:Incluso si el getter es un método, no utilice paréntesis al obtener el valor de la propiedad.

El nombre del método getter/setter no puede ser el mismo que el nombre del atributo, en este caso es carname.

Muchos programadores utilizan el carácter de subrayado _ delante del nombre del atributo para separar el getter/setter del atributo real:

Instancia

Puede usar caracteres de subrayado para separar el getter/setter del atributo 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;

Pruebe usted mismo

Si desea usar el setter, utilice la sintaxis sin paréntesis igual a la del valor de la propiedad:

Instancia

Utilice el 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;

Pruebe usted mismo

Elevación

A diferencia de las declaraciones de funciones y otras declaraciones de JavaScript, las declaraciones de clase no se elevan.

Esto significa que debe declarar la clase primero antes de poder usarla:

Instancia

//Aún no puede usar esta clase.
//myCar = new Car("Ford")
//Esto generaría un error.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Ahora puede usar esta clase:
let myCar = new Car("Ford")

Pruebe usted mismo

Notas:Para otras declaraciones, como las funciones, no se producirá un error al intentar usarla antes de su declaración, ya que el comportamiento predeterminado de la declaración de JavaScript es la elevación (mover la declaración a la parte superior).