同じ形をまとめて作る(クラス)

INPUT · スライド

親の処理を呼んでから足す

01 / 05

子だけプロパティを増やしたい

トラックには「積める重さ」を持たせたい。でもそれは自転車には要らない。

つまり子だけコンストラクタを書き直したいわけだね。メソッドと同じように、コンストラクタもオーバーライドできるよ。

02 / 05

super() で親の処理を呼ぶ

子にコンストラクタを書くと、親のコンストラクタは自動では走らなくなる。だから super(...) と書いて自分で呼び出す必要があるよ。

super(name) は「親のコンストラクタに name を渡して走らせて」という意味。this を使う前に書くのが決まりだよ。

class Vehicle {  constructor(name) {    this.name = name;  }}class Truck extends Vehicle {  constructor(name, weight) {    super(name);    this.weight = weight;  }}const t = new Truck("おおきいトラック", 500);console.log(t.name);console.log(t.weight);

実行結果

おおきいトラック
500

03 / 05

親がやることは親にまかせる

this.name = name; を子でもう一度書けば動くけれど、それだと親と同じことを2か所に書くことになる。

super() を使えば、親の分は親に任せて、子は差分だけ書くという形にできるよ。これが継承のいちばんきれいな使い方だね。

04 / 05

メソッドでも super が使える

メソッドをオーバーライドしたとき、親の元の処理も使いたいことがある。そんなときは super.メソッド名() と書くよ。

「親のをやってから、自分の分を足す」という形が作れるんだ。

class Vehicle {  constructor(name) {    this.name = name;  }  info() {    console.log(`なまえ: ${this.name}`);  }}class Truck extends Vehicle {  constructor(name, weight) {    super(name);    this.weight = weight;  }  info() {    super.info();    console.log(`つめるおもさ: ${this.weight}kg`);  }}const t = new Truck("おおきいトラック", 500);t.info();

実行結果

なまえ: おおきいトラック
つめるおもさ: 500kg

05 / 05

書き分けの目安

オーバーライドするとき、super を使うかどうかはこう考えよう。

  • 親の処理はまるごと要らないsuper は書かない
  • 親の処理に足したいsuper を呼んでから差分を書く

これでクラスの基本はひととおりそろったよ。仕上げの問題をやってみよう。