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();
The 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;
提升
与函数和其他JavaScript声明不同,类声明不会被提升。
这意味着你必须在使用类之前声明它。
例子
// 你还不能使用这个类。
// myCar = new Car("Ford") 将会报错。
class Car {
constructor(brand) {
this.carname = brand;
}
}
// 现在你可以使用这个类了
const myCar = new Car("Ford")
亲自尝试 »
注意: 对于其他声明,例如函数,当你尝试在声明之前使用它时,不会报错,因为JavaScript声明的默认行为是提升(将声明移动到顶部)。