Class inheritance ng JavaScript

Pagkakasunod-sunod ng klase

Kung gusto mong gumawa ng pagkakasunod-sunod ng klase, gamitin mo ang: extends Pangkat:

Ang klase na nilikha sa pamamagitan ng pagkakasunod-sunod ng klase ay minamana ng lahat ng mga paraan ng ibang klase:

实例

Lumikha ng isang klase na may pangalan na "Model" na magpapangunguna sa mga paraan ng klase "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Mayroon akong ' + 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 na nagtutukoy sa magulang na klase.

Sa pamamagitan ng pagtawag sa constructor method, super() Sa mga method, tinawagan namin ang constructor method ng magulang, kung saan nakakuha kami ng akses sa mga katangian at mga method ng magulang.

Ang pagpapatuloy ay napaka-mahalaga para sa pagkakamit ng kahusayan ng pagre-reuse ng code: Magre-reuse ng mga katangian at mga method ng isang klase kapag binubuo ng bagong klase.

Getter at Setter

Ang klase ay nagbibigay-daan din sa paggamit ng getter at setter.

Ito ay lubos na matalino na gamitin ang getter at setter para sa iyong mga atributo, lalo na kapag nais mong gawin ang anumang espesyal na ginagawa sa bago at bago pa itong ibabalik o itatalaga:

Kung nais mong magdagdag ng getter at setter sa klase, gamitin ang: get at set Pangkat:

实例

Buwbuo ng getter at setter para sa atributo na "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;

亲自试一试

注释：Kahit na ang getter ay isang method, huwag gumamit ng pagsasakop kapag nais mong kumuha ng halaga ng atributo.

Ang pangalan ng getter/setter ay hindi dapat magkatulad ng pangalan ng atributo, sa kasong ito ay carname.

Maraming programer ang gumagamit ng character na underscore _ sa harap ng pangalan ng atributo upang paghihiwalay ang getter/setter at ang tunay na atributo:

实例

Maaari mong gamitin ang character na underscore para paghihiwalay ang getter/setter at ang tunay na atributo:

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;

亲自试一试

Kung magiging gumamit ng setter, gamitin ang syntax na katulad ng pagtatalaga ng halaga ng atributo, walang pagsasakop:

实例

Gumamit ng setter upang baguhin ang pangalan ng sasakyan sa "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")
//This would raise an error.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//现在您可以使用该类：
let myCar = new Car("Ford")

亲自试一试

注释：对于其他声明，如函数，在声明之前尝试使用它时不会出错，因为 JavaScript 声明的默认行为是提升（将声明移到顶部）。