Inherytacja klas JavaScript

dziedziczenie klas

Aby utworzyć dziedziczenie klas, użyj extends Klucz.

Klasy tworzone za pomocą dziedziczenia klas dziedziczą wszystkie metody innej klasy:

Instancja

Utwórz klasę o nazwie "Model", która dziedziczy metody klasy "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Mam ' + this.carname + ' '
  }
}
class Model extends Car {}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', to jest ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Spróbuj sam

super() metoda odnosi się do klasy nadrzędnej.

Przez wywołanie super() Metody, wywołujemy metodę constructor nadrzędnej klasy, aby uzyskać dostęp do atrybutów i metod nadrzędnej klasy.

Dziedziczenie jest bardzo użyteczne dla powtarzalności kodu: przy tworzeniu nowej klasy, używamy atrybutów i metod istniejących klas.

Getter i Setter

Klasa pozwala również na użycie getterów i setterów.

Użycie getterów i setterów dla Twoich atrybutów jest bardzo mądre, zwłaszcza jeśli chcesz coś zrobić z wartością zanim ją zwrócisz lub ustawisz.

Aby dodać getter i setter do klasy, użyj get i set Klucz.

Instancja

Utwórz getter i setter dla atrybutu "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;

Spróbuj sam

Uwaga:Nawet jeśli getter jest metodą, nie używaj nawiasów, gdy chcesz uzyskać wartość atrybutu.

Nazwa metody getter/setter nie może być taka sama jak nazwa atrybutu, w tym przypadku to carname.

Wiele programistów używa znaku podkreślenia _ przed nazwą atrybutu, aby oddzielić getter/setter od rzeczywistej atrybutu:

Instancja

Możesz użyć znaku podkreślenia, aby oddzielić getter/setter od rzeczywistej atrybutu:

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;

Spróbuj sam

Aby użyć settera, użyj gramatyki identycznej z ustawianiem wartości atrybutu, bez nawiasów:

Instancja

Użyj settera, aby zmienić nazwę samochodu na "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;

Spróbuj sam

Hoisting

W przeciwieństwie do deklaracji funkcji i innych deklaracji JavaScript, deklaracje klas nie są hoisting.

Oznacza to, że musisz najpierw zadeklarować klasę, a następnie móc jej używać:

Instancja

//Nie możesz jeszcze używać tej klasy.
//myCar = new Car("Ford")
//To spowodowałoby błąd.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Teraz możesz używać tej klasy:
let myCar = new Car("Ford")

Spróbuj sam

Uwaga:Dla innych deklaracji, takich jak funkcje, nie występuje błąd podczas próby użycia jej przed deklaracją, ponieważ domyślne zachowanie deklaracji JavaScript to hoisting (przeniesienie deklaracji na górę).