Για να δημιουργήσετε μια κληρονομιά κλάσης, χρησιμοποιήστε το extends λέξη-κλειδί.
Μια κλάση που δημιουργείται με κληρονομικότητα κλάσης κληρονομεί όλες τις μεθόδους από άλλη τάξη:
Δημιουργήστε μια κλάση με το όνομα "Model" που θα κληρονομήσει τις μεθόδους από το "Car" τάξη:
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();Δοκιμάστε το μόνοι σας →
<!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>
Η μέθοδος super() αναφέρεται στον γονέα τάξη.
Καλώντας τη μέθοδο super() στο μέθοδος κατασκευής, καλούμε τη μέθοδο κατασκευής του γονέα και έχουμε πρόσβαση σε ιδιότητες και μεθόδους του γονέα.
Η κληρονομικότητα είναι χρήσιμη για την επαναχρησιμοποίηση κώδικα: επαναχρησιμοποιήστε ιδιότητες και μεθόδους μιας υπάρχουσας κλάσης όταν δημιουργείτε μια νέα κλάση.
Το Classes σάς επιτρέπει επίσης να χρησιμοποιείτε getters και setters.
Μπορεί να είναι έξυπνο να χρησιμοποιείτε δέκτες και ρυθμιστές για τις ιδιοκτησίες σας, ειδικά αν θέλετε να κάνετε κάτι ιδιαίτερο με την τιμή πριν τα επιστρέψετε ή πριν τα ορίζεις.
Για να προσθέσετε getters και setters στην τάξη, χρησιμοποιήστε το λάβετε και θέστε λέξεις-κλειδιά.
Δημιουργήστε ένα getter και ένα setter για την ιδιότητα "carname":
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;Δοκιμάστε το μόνοι σας →
<!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>
Σημείωση: ακόμα κι αν ο λήπτης είναι μέθοδος, δεν χρησιμοποιείτε παρενθέσεις όταν θέλει να πάρει την αξία του ακινήτου.
Το όνομα της μεθόδου getter/setter δεν μπορεί να είναι ίδιο με το όνομα της ιδιοκτησία, σε αυτήν την περίπτωση όνομα αυτοκινήτου.
Πολλοί προγραμματιστές χρησιμοποιούν έναν χαρακτήρα υπογράμμισης _ πριν από το όνομα της ιδιότητας για να διαχωρίσετε τη λήψη/ρυθμιστή από την πραγματική ιδιότητα:
Μπορείτε να χρησιμοποιήσετε τον χαρακτήρα υπογράμμισης για να διαχωρίσετε το λήπτη/ρυθμιστή από το πραγματική ιδιοκτησία:
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;Δοκιμάστε το μόνοι σας →
<!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>
Για να χρησιμοποιήσετε έναν ρυθμιστή, χρησιμοποιήστε την ίδια σύνταξη όπως όταν ορίζετε μια τιμή ιδιότητας, χωρίς παρενθέσεις:
Χρησιμοποιήστε ένα ρυθμιστή για να αλλάξετε το όνομα αυτοκινήτου σε "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;Δοκιμάστε το μόνοι σας →
<!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>
Σε αντίθεση με τις συναρτήσεις και άλλες δηλώσεις JavaScript, οι δηλώσεις κλάσεων δεν ανυψώνονται.
Αυτό σημαίνει ότι πρέπει να δηλώσετε μια κλάση για να μπορέσετε να τη χρησιμοποιήσετε:
//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")Δοκιμάστε το μόνοι σας →
<!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>
Σημείωση: Για άλλες δηλώσεις, όπως συναρτήσεις, ΔΕΝ θα λάβετε ένα σφάλμα όταν προσπαθείτε να το χρησιμοποιήσετε πριν δηλωθεί, επειδή η προεπιλεγμένη συμπεριφορά των δηλώσεων JavaScript ανυψώνονται (μετακινώντας τη δήλωση στην κορυφή).