JavaScript 類繼承
類繼承
要建立類繼承,請使用 extends
關鍵字。
透過類繼承建立的類繼承了另一個類的所有方法
示例
建立一個名為 "Model" 的類,它將繼承 "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() + ', 它是一輛 ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
super()
方法指向父類。
透過在建構函式中呼叫 `super()` 方法,我們可以呼叫父類的建構函式,並訪問父類的屬性和方法。
繼承對於程式碼重用非常有用:在建立新類時,可以重用現有類的屬性和方法。
Getter 和 Setter
類還允許你使用 getter 和 setter。
對於你的屬性,使用 getter 和 setter 可能是明智的,特別是如果你想在返回值之前,或者在設定值之前對值執行一些特殊操作。
要在類中新增 getter 和 setter,請使用 `get` 和 `set` 關鍵字。
示例
為“carname”屬性建立一個 getter 和 setter
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;
注意: 即使 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;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
要使用 setter,請使用與設定屬性值相同的語法,不帶括號。
示例
使用 setter 將 carname 更改為“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;
提升 (Hoisting)
與函式和其他 JavaScript 宣告不同,類宣告不會被提升。
這意味著你必須在使用類之前宣告它。
示例
//你還不能使用該類。
//myCar = new Car("Ford") 將會引發錯誤。
class Car {
constructor(brand) {
this.carname = brand;
}
}
//現在你可以使用該類了。
const myCar = new Car("Ford")
自己動手試一試 »
注意: 對於其他宣告,例如函式,當你嘗試在宣告之前使用它們時,不會出現錯誤,因為 JavaScript 宣告的預設行為是提升(將宣告移動到頂部)。