JavaScript 逆引き集 | プロトタイプ継承（古典）

JavaScript JavaScript
スポンサーリンク

プロトタイプ継承（古典） — Child.prototype = Object.create(Parent.prototype)

JavaScript には「プロトタイプ継承」という仕組みがあります。
これは「あるオブジェクト（親）の機能を別のオブジェクト（子）が引き継ぐ」方法です。ES6 以降は class 構文が主流ですが、昔は Object.create を使った古典的な継承 がよく使われていました。

基本のコード例

// 親コンストラクタ
function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function() {
  console.log("こんにちは、私は " + this.name + " です");
};

// 子コンストラクタ
function Child(name, age) {
  Parent.call(this, name); // 親のコンストラクタを呼び出す
  this.age = age;
}

// プロトタイプ継承
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // constructor を修正

Child.prototype.sayAge = function() {
  console.log("年齢は " + this.age + " 歳です");
};

// 使用例
const c = new Child("Aki", 20);
c.sayHello(); // → "こんにちは、私は Aki です"
c.sayAge();   // → "年齢は 20 歳です"
JavaScript

ポイント解説

  • Parent.call(this, name)
    → 親のコンストラクタを呼び出して、this に親のプロパティをセット。
  • Child.prototype = Object.create(Parent.prototype)
    → 親のメソッドを子のプロトタイプにコピーして継承。
  • Child.prototype.constructor = Child
    → プロトタイプを上書きすると constructor が Parent になるので修正。

よく使うテンプレート集

親のメソッドを拡張する

Child.prototype.sayHello = function() {
  // 親のメソッドを呼ぶ
  Parent.prototype.sayHello.call(this);
  console.log("さらに、私は子クラスです！");
};
JavaScript

複数の子インスタンス

const c1 = new Child("Mika", 18);
const c2 = new Child("Taro", 25);

c1.sayHello(); // "こんにちは、私は Mika です"
c2.sayAge();   // "年齢は 25 歳です"
JavaScript

例題: 動物クラスの継承

function Animal(type) {
  this.type = type;
}
Animal.prototype.move = function() {
  console.log(this.type + " が動いた！");
};

function Dog(name) {
  Animal.call(this, "犬");
  this.name = name;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(this.name + " がワンワン！と鳴いた");
};

const d = new Dog("ポチ");
d.move(); // "犬 が動いた！"
d.bark(); // "ポチ がワンワン！と鳴いた"
JavaScript
  • 効果: Dog は Animal の機能を継承しつつ、独自の bark を持つ。

実務でのコツ

  • 古典的継承: ES6 以前のコードやライブラリでよく見かける。
  • 今は class 構文推奨: class Parent { ... } class Child extends Parent { ... } と書けるので読みやすい。
  • constructor 修正を忘れない: Object.create を使うと constructor がずれるので注意。
  • 親メソッド呼び出し: Parent.prototype.method.call(this) で呼べる。

ありがちなハマりポイントと対策

  • constructor が Parent のまま:
    • 対策: Child.prototype.constructor = Child を必ず書く。
  • 親のプロパティが継承されない:
    • 対策: Parent.call(this, ...) を子コンストラクタで呼ぶ。
  • ES6との混同:
    • 古典的継承は class の extends と同じ役割。

練習問題（乗り物クラス）

function Vehicle(type) {
  this.type = type;
}
Vehicle.prototype.run = function() {
  console.log(this.type + " が走る！");
};

function Car(name) {
  Vehicle.call(this, "車");
  this.name = name;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.horn = function() {
  console.log(this.name + " がクラクションを鳴らす！");
};

const car = new Car("プリウス");
car.run();  // "車 が走る！"
car.horn(); // "プリウス がクラクションを鳴らす！"
JavaScript

直感的な指針

  • Object.create で親のプロトタイプをコピー → 子がメソッドを継承。
  • Parent.call(this, ...) で親のプロパティを継承。
  • constructor を修正するのを忘れない。
  • ES6 の class に繋がる基礎知識。

これを覚えれば「古いコードの継承の仕組み」を理解でき、class 構文の裏側もイメージしやすくなります。

スポンサーリンク
タイトルとURLをコピーしました