Ereditarietà delle classi JavaScript

Ereditarietà di classe

Per creare ereditarietà di classe, utilizzare: extends Parola chiave.

Le classi create tramite ereditarietà di classe ereditano tutti i metodi di un'altra classe:

Esempio

Creare una classe chiamata "Model" che erediterà i metodi della classe "Car":

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

Prova da solo

super() metodo si riferisce alla classe madre.

Chiamando nel metodo constructor super() Metodi, abbiamo chiamato il metodo constructor del padre, ottenendo il permesso di accedere agli attributi e ai metodi del padre.

L'ereditarietà è molto utile per la riutilizzabilità del codice: quando si crea una nuova classe, si possono riutilizzare attributi e metodi di classi esistenti.

Getter e Setter

La classe ti permette anche di utilizzare getter e setter.

È una buona idea utilizzare getter e setter per i tuoi attributi, specialmente se desideri eseguire azioni speciali prima di restituire o impostare i valori.

Per aggiungere getter e setter in una classe, utilizzare get e set Parola chiave.

Esempio

Creare getter e setter per l'attributo "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;

Prova da solo

Nota:Anche se getter è un metodo, non utilizzare parentesi quando si desidera ottenere il valore dell'attributo.

Il nome del metodo getter/setter non può essere lo stesso dell'attributo, nel presente esempio è carname.

Molti programmatori usano il carattere di sottolineatura _ davanti al nome dell'attributo per separare getter/setter dall'attributo reale:

Esempio

Puoi usare il carattere di sottolineatura per separare getter/setter dall'attributo reale:

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;

Prova da solo

Se si utilizza lo setter, utilizzare la stessa sintassi per impostare il valore dell'attributo, senza parentesi:

Esempio

Utilizzare lo setter per modificare il nome dell'auto in "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;

Prova da solo

Elevamento

A differenza delle dichiarazioni di funzione e altre dichiarazioni JavaScript, le dichiarazioni di classe non vengono elevate.

Questo significa che devi dichiarare la classe prima di essere in grado di utilizzarla:

Esempio

//Non puoi ancora utilizzare la classe.
//myCar = new Car("Ford")
//Questo solleverebbe un errore.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Ora puoi utilizzare la classe:
let myCar = new Car("Ford")

Prova da solo

Nota:Per altre dichiarazioni, come le funzioni, non si verifica un errore quando si tenta di utilizzarle prima della dichiarazione, perché il comportamento predefinito delle dichiarazioni JavaScript è l'hoisting (spostamento delle dichiarazioni in alto).