,

[JavaScript General] JavaScript における継承・プロトタイプチェーン

公開日: 2016/07/27
更新日: 2019/01/11

こちらで勉強。
前回の続き。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.07.25
山田 祥寛
技術評論社
売り上げランキング: 36,098
Amazon.co.jpで詳細を見る

Contents

プロトタイプチェーン

  • プロトタイプにインスタンスを設定することで、インスタンス同士を「暗黙の参照」で連結し、互いに継承関係を持たせることができる。
  • このようなプロトタイプの連結をプロトタイプチェーンと呼ぶ。最上位・終端は Object.prototype となる。
  • インスタンスが生成された時点で固定され、その後の変更に関わらず保持される。
javascript
'use strict';
var Animal = function() {}
Animal.prototype = {
  walk: function() { document.writeln('トコトコ...'); }
}
var SuperAnimal = function() {}
SuperAnimal.prototype = {
  walk: function() { document.writeln('ダダダダ！'); }
}
var Dog = function() {}
// Dogオブジェクトのプロトタイプとして、Animalオブジェクトのインスタンスをセットする
Dog.prototype = new Animal(); // Animal を継承
Dog.prototype.bark = function() {
  document.writeln('わんわん');
}
var d1 = new Dog();
d1.walk(); // トコトコ...
d1.bark(); // わんわん
Dog.prototype = new SuperAnimal(); // SuperAnimal を継承
var d2 = new Dog();
d2.walk(); // ダダダダ！
d1.walk(); // トコトコ...

補足

JavaScript が持っていない仕組みを実現するテクニックがあるそう。

  • クラスライクな継承の仕組み
  • プライベートメンバの定義

ひとまず以下だけ覚えておく。

  • プライベートメンバであることを表すために、プロパティ・メソッド名の頭にアンダースコア _ を付ける慣例がある。

ES2015 のクラス定義に書き換える

上述のコードの意図（その後の変更に関わらず保持される）がくみ取れてない気もするけれども、書き換えると継承が明示されるので分かりやすくなると言うことで良いかな。

javascript
'use strict';
class Animal {
  walk() { document.writeln('トコトコ...'); }
}
class SuperAnimal {
  walk() { document.writeln('ダダダダ！'); }
}
class Dog1 extends Animal {
  bark() { document.writeln('わんわん'); }
}
class Dog2 extends SuperAnimal {}
var d1 = new Dog1();
d1.walk();
d1.bark();
var d2 = new Dog2();
d2.walk();
d1.walk();

補遺