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

INPUT · スライド

受け継いだ動きを差し替える

01 / 04

受け継いだままだと合わないとき

親に書いた run は「はしる」と表示する。でも自転車だけは「すいすいはしる」と言わせたい。

こういうとき、子のためだけに別の名前のメソッドを足すと、呼ぶ側が「相手によって呼ぶ名前を変える」ことになってしまう。それは避けたいよね。

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

探す順番を思い出そう

メソッドを呼ぶと、まずその子クラスを探して、無ければ親を見に行く——という順番だったよね。

オーバーライドはこの順番を使っているだけ。子に同じ名前があれば、親まで探しに行かずにそこで見つかる、というわけだよ。

ここから書いてみよう。