JavaScriptでコンストラクタを使ってクラス継承を行う。
- 作者: Christian Johansen,長尾高弘
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2011/11/25
- メディア: 大型本
- 購入: 19人 クリック: 331回
- この商品を含むブログを見る
上記書籍に紹介されているコンストラクタを使ったクラス継承方法が、ちょっと説明不足に感じたので補足のためのメモを残しておきます。
検証コード
Step1
コード
(function(){ console.log('@Step1'); function Man(name){ this.name = name; } var smith = new Man('smith'); function SMan(name){ this.name = 'Super ' + name; } SMan.prototype = Man.prototype; var sSmith = new SMan('smith'); console.log(smith.name); console.log(smith instanceof Man); console.log(smith.constructor); console.log(sSmith.name); console.log(sSmith instanceof Man); console.log(sSmith instanceof SMan); console.log(sSmith.constructor); }());
実行結果
@Step1 smith true function Man(name){ this.name = name; } Super smith true true function Man(name){ this.name = name; }
解説
SManのインストラクタのコンストラクタプロパティがManのものになっているので不十分です。
Step2
コード
(function(){ console.log('@Step2'); function Man(name){ this.name = name; } var smith = new Man('smith'); function SMan(name){ this.name = 'Super ' + name; } SMan.prototype = Man.prototype; SMan.prototype.constructor = SMan; var sSmith = new SMan('smith'); console.log(smith.name); console.log(smith instanceof Man); console.log(smith.constructor); console.log(sSmith.name); console.log(sSmith instanceof Man); console.log(sSmith instanceof SMan); console.log(sSmith.constructor); }());
実行結果
@Step2 smith true function SMan(name){ this.name = 'Super ' + name; } Super smith true true function SMan(name){ this.name = 'Super ' + name; }
解説
今度はManのインストラクタのコンストラクタプロパティがSManのものになっているので不十分です。
Step3
コード
(function(){ console.log('@Step3'); function Man(name){ this.name = name; } var smith = new Man('smith'); function SMan(name){ this.name = 'Super ' + name; } SMan.prototype = (function(){ function F() {} F.prototype = Man.prototype; return new F(); }()); SMan.prototype.constructor = SMan; var sSmith = new SMan('smith'); console.log(smith.name); console.log(smith instanceof Man); console.log(smith.constructor); console.log(sSmith.name); console.log(sSmith instanceof Man); console.log(sSmith instanceof SMan); console.log(sSmith.constructor); }());
実行結果
@Step3 smith true function Man(name){ this.name = name; } Super smith true true function SMan(name){ this.name = 'Super ' + name; }
解説
両インストラクタのコンストラクタプロパティが期待したものになりました。
最後に
以上です。
指摘等あればコメント頂けると幸いです。