JavaScript 類繼承

類繼承

如需創建類繼承,請使用 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();

親自試一試

super() 方法引用父類。

通過在 constructor 方法中調用 super() 方法,我們調用了父級的 constructor 方法,獲得了父級的屬性和方法的訪問權限。

繼承對于代碼可重用性很有用:在創建新類時重用現有類的屬性和方法。

Getter 和 Setter

類還允許您使用 getter 和 setter。

為您的屬性使用 getter 和 setter 很聰明,特別是如果您想在返回它們之前或在設置它們之前對值做一些特殊的事情。

如需在類中添加 getter 和 setter,請使用 getset 關鍵字。

實例

為 "carname" 屬性創建 getter 和 setter:

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;

親自試一試

注釋:即使 getter 是一個方法,當你想要獲取屬性值時也不要使用括號。

getter/setter 方法的名稱不能與屬性名稱相同,在本例中為 carname

許多程序員在屬性名稱前使用下劃線字符 _ 將 getter/setter 與實際屬性分開:

實例

您可以使用下劃線字符將 getter/setter 與實際屬性分開:

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;

親自試一試

如需使用 setter,請使用與設置屬性值相同的語法,不帶括號:

實例

使用 setter 將汽車名稱更改為 "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 聲明的默認行為是提升(將聲明移到頂部)。