レッスンに戻る

継承でのエラー

重要性: 5

下のプロトタイプ継承でのエラーを見つけてください。

何が間違っていますか?どのような結果になるでしょうか?

function Animal(name) {
  this.name = name;
}

Animal.prototype.walk = function() {
  alert(this.name + ' walks');
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = Animal.prototype;

Rabbit.prototype.walk = function() {
  alert(this.name + " bounces!");
};

エラーとなる行はここです:

Rabbit.prototype = Animal.prototype;

ここで、Rabbit.prototypeAnimal.prototype は同じオブジェクトになります。なので、両方のクラスのメソッドがそのオブジェクトに混在します。

結果として、Rabbit.prototyp.walkAnimal.prototype.walk を上書きするので、すべての animals は跳ね始めます(bounce)。:

function Animal(name) {
  this.name = name;
}

Animal.prototype.walk = function() {
  alert(this.name + ' walks');
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = Animal.prototype;

Rabbit.prototype.walk = function() {
  alert(this.name + " bounces!");
};

let animal = new Animal("pig");
animal.walk(); // pig bounces!

正しいバリアントは次の通りです:

Rabbit.prototype.__proto__ = Animal.prototype;
// もしくはこのような形です:
Rabbit.prototype = Object.create(Animal.prototype);

これによりプロトタイプは分離され、それぞれ対応するクラスのメソッドを格納します。が、Rabbit.prototypeAnimal.prototype を継承します。