[JavaScript General] JavaScript における継承・プロトタイプチェーン
こちらで勉強。
前回の続き。
[markdown]
技術評論社
売り上げランキング: 36,098
## プロトタイプチェーン
– プロトタイプにインスタンスを設定することで、インスタンス同士を「暗黙の参照」で連結し、互いに継承関係を持たせることができる。
– このようなプロトタイプの連結をプロトタイプチェーンと呼ぶ。最上位・終端は 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 | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)
### 補足
JavaScript が持っていない仕組みを実現するテクニックがあるそう。
– クラスライクな継承の仕組み
– プライベートメンバの定義
> * [JavaScriptの継承について。 – プログラミング日記](http://kotaroscript.hatenablog.com/entry/2015/02/06/200453)
> * [クロージャ – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)
ひとまず以下だけ覚えておく。
– プライベートメンバであることを表すために、プロパティ・メソッド名の頭にアンダースコア `_` を付ける慣例がある。
### 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();
“`
## 補遺
> * [JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう | HTML5Experts.jp](https://html5experts.jp/takazudo/17355/)
> * [ES6時代のJavaScript – クックパッド開発者ブログ](http://techlife.cookpad.com/entry/2015/02/02/094607)
[/markdown]