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，请使用 get 和 set 关键字。

インスタンス

为 "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;

自分で試してみる

昇格

関数や他の JavaScript 声明とは異なり、クラス声明は昇格されません。

これは、まずクラスを宣言してから使用する必要があることを意味します：

インスタンス

//まだこのクラスを使用できません。
//myCar = new Car("Ford")
//これはエラーを引き起こします。
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//今やこのクラスを使用できます：
let myCar = new Car("Ford")

自分で試してみる

注記：他の宣言、例えば関数のように、宣言の前に使用しようとするとエラーが発生しません。なぜなら、JavaScript の宣言のデフォルトの動作は昇格（宣言を先頭に移動）だからです。