01 / 04
同じ形をまとめて作る(クラス)
INPUT · スライド
受け継いだ動きを差し替える
02 / 04
同じ名前で書き直す
子クラスに親と同じ名前のメソッドを書くと、その子ではそっちが使われる。これをオーバーライド(上書き)と呼ぶよ。
呼ぶ側は今までどおり run() と書くだけ。動きだけが差し替わるんだ。
class Vehicle { constructor(name) { this.name = name; } run() { console.log(`${this.name}がはしる`); }}class Bicycle extends Vehicle { run() { console.log(`${this.name}がすいすいはしる`); }}const b = new Bicycle("あかいじてんしゃ");b.run();実行結果
あかいじてんしゃがすいすいはしる
03 / 04
親のほうは変わらない
上書きされるのはその子だけ。親クラスのメソッドはそのまま残っているし、別の子にも影響しないよ。
「親のを消して書き直す」のではなく、「その子のときだけ別のものを見る」と考えよう。
class Vehicle { constructor(name) { this.name = name; } run() { console.log(`${this.name}がはしる`); }}class Bicycle extends Vehicle { run() { console.log(`${this.name}がすいすいはしる`); }}const v = new Vehicle("ふつうのくるま");const b = new Bicycle("あかいじてんしゃ");v.run();b.run();実行結果
ふつうのくるまがはしる あかいじてんしゃがすいすいはしる
04 / 04
探す順番を思い出そう
メソッドを呼ぶと、まずその子クラスを探して、無ければ親を見に行く——という順番だったよね。
オーバーライドはこの順番を使っているだけ。子に同じ名前があれば、親まで探しに行かずにそこで見つかる、というわけだよ。
ここから書いてみよう。