同じ形をまとめて作る（クラス）
INPUT · スライド
01 / 06
引き継がれるのはコンストラクタだけじゃない。メソッドもそのまま使えるよ。
子クラスに run なんて書いていないのに b.run() が動く。呼ばれたとき、まず子クラスを探して、無ければ親クラスを見に行くからだよ。
class Vehicle { constructor(name) { this.name = name; } run() { console.log(`${this.name}がはしる`); }}class Bicycle extends Vehicle {}const b = new Bicycle("あかいじてんしゃ");b.run();実行結果
あかいじてんしゃがはしる
02 / 06
親に書いたメソッドの中の this は、呼び出した子のインスタンスを指すよ。
だから同じ run() でも、子ごとに違う名前が出てくる。処理は親、中身は子、という組み合わせになっているんだ。
class Vehicle { constructor(name) { this.name = name; } run() { console.log(`${this.name}がはしる`); }}class Bicycle extends Vehicle {}class Truck extends Vehicle {}const b = new Bicycle("あかいじてんしゃ");const t = new Truck("おおきいトラック");b.run();t.run();実行結果
あかいじてんしゃがはしる おおきいトラックがはしる
03 / 06
メソッドを呼ぶと、JSは子 → 親の順に探しに行くよ。
1. まず呼ばれた側のクラスに、その名前のメソッドがあるか見る
2. 無ければ親クラスを見る
3. それでも無ければエラーになる
この順番が分かっていると、次に学ぶ「上書き」の仕組みもすんなり理解できるよ。
04 / 06
子クラスに親と同じ名前のメソッドを書くと、探す順番のとおり子のほうが先に見つかる。つまり子の書き方が使われる。
共通の動きは親に置いて、違う動きが必要な子だけ書きかえる。この形は次のレッスンでくわしく扱うよ。
class Vehicle { run() { console.log("はしる"); }}class Bicycle extends Vehicle { run() { console.log("ペダルをこぐ"); }}new Vehicle().run();new Bicycle().run();実行結果
はしる ペダルをこぐ
05 / 06
共通のメソッドが親に1つあるということは、そこを直せば全部の子に効くということ。
直し忘れが起きないのが継承の強み。逆に、親を変えると子にも影響が出るということでもあるから、共通に入れるかどうかは少し考えて決めよう。
06 / 06
迷ったときの目安は、「どの子にとっても正しいか」だよ。
乗り物の例なら、「走る」はどの乗り物にも当てはまるので親に置いていい。でも「ペダルをこぐ」は自転車だけの話なので、親に置くとおかしくなる。
たまたま2つの子で同じ処理だからという理由で親に上げると、3つ目の子が来たときに困ることになる。ここから書いてみよう。