01 / 05
同じ形をまとめて作る(クラス)
INPUT · スライド
親の処理を呼んでから足す
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を呼んでから差分を書く
これでクラスの基本はひととおりそろったよ。仕上げの問題をやってみよう。