Συγγένεια Κλάσεων JavaScript

Κληρονομικότητα κλάσεων

Για να δημιουργήσετε κληρονομικότητα κλάσεων, χρησιμοποιήστε extends Keywords.

Οι κλάσεις που δημιουργούνται με κληρονομικότητα 继承 all methods από την άλλη κλάση:

Παράδειγμα

Δημιουργήστε μια κλάση με το όνομα "Model" που θα 继承 methods από την κλάση "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Εχω ένα ' + 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();

Δοκιμάστε το προσωπικά

super() method, we reference the parent class.

By calling super() In the constructor method, we called the parent class constructor method and obtained access to the parent class properties and methods.

Inheritance is very useful for code reusability: reuse existing class properties and methods when creating a new class.

Getter and Setter

The class also allows you to use getter and setter.

Using getter and setter for your properties is smart, especially if you want to do something special with the value before or after returning it.

To add getter and setter in a class, please use get and set Keywords.

Παράδειγμα

Create getter and setter for the "carname" property:

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;

Δοκιμάστε το προσωπικά

Σημείωση:Even if the getter is a method, do not use parentheses when you want to get the property value.

The name of the getter/setter method cannot be the same as the property name, in this case it is carname.

Many programmers use the underscore character _ before the property name to separate the getter/setter from the actual property:

Παράδειγμα

You can use the underscore character to separate the getter/setter from the actual property:

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;

Δοκιμάστε το προσωπικά

If you need to use the setter, please use the same syntax as setting the property value, without parentheses:

Παράδειγμα

Using the setter to change the car name to "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;

Δοκιμάστε το προσωπικά

Hoisting

Διαφορετικά από τις συναρτήσεις και άλλες δηλώσεις JavaScript, οι δηλώσεις κλάσης δεν ανυψώνονται.

Αυτό σημαίνει ότι πρέπει να δηλώσετε πρώτα την κλάση και μετά να μπορείτε να τη χρησιμοποιήσετε:

Παράδειγμα

//Δεν μπορείτε ακόμα να χρησιμοποιήσετε τη κλάση.
//myCar = new Car("Ford")
//Αυτό θα προκαλέσει σφάλμα.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Τώρα μπορείτε να χρησιμοποιήσετε τη κλάση:
let myCar = new Car("Ford")

Δοκιμάστε το προσωπικά

Σημείωση:Για άλλες δήλωσεις, όπως οι συνάρτησεις, δεν θα προκύψει σφάλμα όταν προσπαθείτε να χρησιμοποιήσετε τη δήλωση πριν τη δήλωση, επειδή η προεπιλεγμένη συμπεριφορά της δήλωσης JavaScript είναι η ανύψωση (μετακίνηση της δήλωσης στην κορυφή).