Luo luokan periytyminen käyttämällä laajennaa. avainsana.
Luokkaperinnöllä luotu luokka perii kaikki menetelmät toinen luokka:
Luo luokka nimeltä "Model", joka perii menetelmät "Autosta" luokka:
class Car {
constructor(brand) {
this.carname =
brand; }
present() {
return 'I have a ' + 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();Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>
<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
Metodi super() viittaa ylätason menetelmään luokkaa.
Kutsumalla super()-metodia konstruktorimenetelmä, kutsumme vanhemman konstruktorimenetelmää ja saamme pääsyn siihen vanhemman ominaisuudet ja menetelmät.
Periytys on hyödyllinen koodin uudelleenkäytettävyyden kannalta: käytä uudelleen olemassa olevan luokan ominaisuuksia ja menetelmiä, kun luot uuden luokan.
Luokat mahdollistavat myös getterien ja settereiden käytön.
Saattaa olla fiksua käyttää kiinteistöissäsi gettereitä ja settereitä, varsinkin jos haluat tehdä arvolla jotain erityistä ennen niiden palauttamista tai ennen asetat ne.
Voit lisätä luokkaan saajia ja asettajia käyttämällä hanki ja aseta avainsanat.
Luo getteri ja asettaja "carname"-ominaisuutta varten:
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
Huomaa: vaikka getteri olisi menetelmä, et käytä sulkeita, kun käytät haluavat saada kiinteistön arvon.
Getter/setter-metodin nimi ei voi olla sama kuin menetelmän nimi ominaisuus, tässä tapauksessa autonnimi.
Monet ohjelmoijat käyttävät alaviivaa _ ennen ominaisuuden nimeä erottaaksesi getter/setter todellisesta ominaisuudesta:
Voit käyttää alaviivaa erottelemaan getter/setter -merkkiä todellinen omaisuus:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Jos haluat käyttää asettajaa, käytä samaa syntaksia kuin määrittäessäsi ominaisuuden arvoa ilman sulkeita:
Käytä setteriä vaihtaaksesi auton nimeksi "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Toisin kuin funktiot ja muut JavaScript-ilmoitukset, luokkamäärityksiä ei nosteta.
Tämä tarkoittaa, että sinun on ilmoitettava luokka ennen kuin voit käyttää sitä:
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car { constructor(brand) {
this.carname = brand; }
}
//Now you can use the class:
const myCar = new Car("Ford")Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Huomaa: Muille ilmoituksille, kuten funktioille, et saa virhe, kun yrität käyttää sitä ennen kuin se on ilmoitettu, koska oletuskäyttäytyminen JavaScript-ilmoitukset nousevat (siirtää ilmoituksen alkuun).