JavaScript Class Inheritance

Klasse-inheritance

Gebruik extends Kleine letter.

Klassen die met klasse-inheritance zijn gemaakt, overnemen alle methoden van een andere klasse:

Voorbeeld

Maak een klasse genaamd "Model" aan die de methoden van de "Car" klasse overneemt:

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

Probeer het zelf

super() methode verwijst naar de ouderlijke klasse.

Door aan te roepen super() Methoden, we hebben de constructor van het ouderlijke object aangeroepen om toegang te krijgen tot de eigenschappen en methoden van het ouderlijke object.

Erven is nuttig voor codehergebruik: herbruik bestaande eigenschappen en methoden bij het maken van een nieuwe klasse.

Getter en Setter

De klasse laat je ook getters en setters gebruiken.

Om getters en setters voor je eigenschappen te gebruiken, is slim, vooral als je iets speciaals wilt doen met de waarde voordat je ze teruggeeft of instelt.

Gebruik get en set Kleine letter.

Voorbeeld

Maak getters en setters voor de eigenschap "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;

Probeer het zelf

Opmerking:Hoewel de getter een methode is, gebruik je geen haakjes wanneer je de waarde van de eigenschap wilt ophalen.

De naam van de getter/setter mag niet hetzelfde zijn als de naam van de eigenschap, in dit voorbeeld is dat carname.

Vele programmeurs gebruiken een onderstreepsteken _ voor de eigenschapsnaam om de getter/setter te onderscheiden van de daadwerkelijke eigenschap:

Voorbeeld

Je kunt een onderstreepsteken gebruiken om de getter/setter te onderscheiden van de daadwerkelijke eigenschap:

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;

Probeer het zelf

Gebruik dezelfde syntaxis zonder haakjes om de waarde van de eigenschap in te stellen als bij het instellen van de eigenschapswaarde:

Voorbeeld

Gebruik de setter om de naam van het auto te wijzigen naar "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;

Probeer het zelf

Hoisting

In tegenstelling tot functies en andere JavaScript-verklaringen, worden klasseverklaringen niet opgehoist.

Dit betekent dat je de klasse moet declareren voordat je het kunt gebruiken:

Voorbeeld

//Je kunt de klasse nog niet gebruiken.
//myCar = new Car("Ford")
//Dit zou een fout veroorzaken.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Nu kun je de klasse gebruiken:
let myCar = new Car("Ford")

Probeer het zelf

Opmerking:Voor andere verklaringen, zoals functies, zal er geen fout optreden als je het probeert te gebruiken voordat het wordt verklaard, omdat het standaardgedrag van JavaScript-verklaringen is hoisting (het verplaatsen van de verklaring naar boven).