JavaScript luokan perintä

Luokan perintä

Luokan perinnön luomiseksi käytä extends avainsana.

Luokka, joka luodaan luokkaperinnolla, perii toisen luokan kaikki metodit:

Esimerkki

Luo luokka nimeltä "Model", joka perii "Car"-luokan metodit:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    palauta 'Minulla on ' + tämä.auto
  }
}
luokka Model laajenee Car:sta {
  constructor(brand, mod) {
    super(brand);
    tämä.model = mod;
  }
  show() {
    palauta tämä.present() + ', se on ' + tämä.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Kokeile itse

super() menetelmä viittaa isäluokkaan.

Kutsuen constructor-metodia super() Menetelmä, me kutsuimme isäluokan constructor-metodia, saimme isäluokan ominaisuuksien ja menetelmien pääsyn.

Perintä on hyödyllistä koodin uudelleenkäytettävyydelle: käyttääksesi olemassa olevan luokan ominaisuuksia ja menetelmiä luodessa uuden luokan.

Getter ja Setter

Luokka mahdollistaa myös getterin ja setterin käytön.

On viisaata käyttää getteria ja setteria ominaisuuksillesi, erityisesti jos haluat tehdä jotain erityistä ennen kuin palautat tai asetat niiden arvon.

Jos haluat lisätä getterin ja setterin luokkaan, käytä hanki ja asettaa avainsana.

Esimerkki

Luo getter ja setter "carname" ominaisuudelle:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  hanki cnam() {
    palauta tämä.carname;
  }
  asettaa cnam(x) {
    tämä.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Kokeile itse

Huomautus:Vaikka getter on metodi, älä käytä sulkeita, kun haluat hankkia ominaisuuden arvon.

getter/setter-metodin nimi ei voi olla sama kuin ominaisuuden nimi, tässä tapauksessa carname.

Monet ohjelmistokehittäjät käyttävät alaviivaa merkkiä _ erottamaan getterin/setterin ja todellisen ominaisuuden:

Esimerkki

Voit käyttää alaviivaa merkkiä erottaksesi getterin/setterin ja todellisen ominaisuuden:

class Car {
  constructor(brand) {
    tämä._carname = brand;
  }
  hanki carname() {
    palauta tämä._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Kokeile itse

Jos käytät setteria, käytä samaa syntaksia kuin asettaa arvoa, ilman sulkeita:

Esimerkki

Käytä setteria muuttaaksesi auton nimen "Volvo":

class Car {
  constructor(brand) {
    tämä._carname = brand;
  }
  hanki carname() {
    palauta tämä._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Kokeile itse

Nostaminen

Toisin kuin funktiot ja muut JavaScript-määrittelyt, luokkamäärittelyt eivät noudata nostoa.

Tämä tarkoittaa, että sinun täytyy ensin määrittää luokka, ennen kuin voit käyttää sitä:

Esimerkki

//Et voi vielä käyttää tätä luokkaa.
//myCar = new Car("Ford")
//Tämä aiheuttaisi virheen.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Nyt voit käyttää tätä luokkaa:
let myCar = new Car("Ford")

Kokeile itse

Huomautus:Muissa lausunnoissa, kuten funktioissa, ei tapahdu virhettä, kun sitä yritetään käyttää ennen sen määrittämistä, koska JavaScript-määrittelyjen oletusarvoinen käyttäytyminen on nosto (määrittely siirretään ylös).