baseメソッドを使ってオブジェクト指向を実現
注意 (追記: 2014年1月2日)
baseメソッドを使うとIE8で問題が発生しましたので、baseメソッドを非推奨とします。この記事は、検証用に残しておきます。
baseメソッドについて
今回は、前回の説明したbaseメソッドの使い方を、さらに詳しく説明します。JavaScriptの初歩的な知識があればOKです。
前回の記事 「JavaScriptのオブジェクトを別のオブジェクトと合成させるメソッドを実装してみた」
インスタンスベースのオブジェクト指向とは
ここでは、クラスベースのオブジェクト指向と違って、インスタンスから継承して別のインスタンスを作ることができるという意味で、「インスタンスベースのオブジェクト指向」を使っていきます。
baseメソッドを使えば、これが誰でも簡単に実現できます。
メソッドの書き方
さっそく、メソッドを定義してみましょう。コードの書き方としては、
this.$オブジェクトの名前 = this.base({
メソッド名: function(){}
});
という使い方をします。また、以下のように、baseメソッドの引数が関数でもかまいません。
this.$オブジェクトの名前 = this.base(function(){
this.メソッド名 = function(){};
});
ちなみに、メソッドの呼び出し方は、次のようになります。
this.$obj.メソッド名();
カスケード継承
ここまでは、普通の名前空間と変わりがありません。しかし、カスケード継承という継承を用いて、オブジェクト指向のプログラミングを書くことができるのです。
this.baseメソッドを使って、オブジェクト$parentを、別のオブジェクト$childにカスケード継承させてみましょう。
this.$parent = this.base(function() {
/*hoメソッドの定義*/
this.ho = function() {
return 12;
};
/*カスケード継承*/
this.$child = this.base({
hoge: function(){
return this.ho();
}
});
});
this.$parent.ho(); // 12
this.$parent.$child.ho(); // 12
this.$parent.$child.hoge(); // 12
$childオブジェクトが、親オブジェクトの$parentのhoメソッドを継承していることがわかります。このようにして、継承を構造化できるのがカスケード継承の大きな利点です。
入れ子は、以下のように自由にできます。
/*カスケード継承は、いくらでも入れ子にできる*/ this.$a = this.base(function() { this.$b = this.base(function() { this.$c = this.base(function() { }); }); }); this.$a.$b.$c;
また、メソッドチェーンを使えます。
this.$d = this.base({ })
.base(function() {});
カスケード継承によって、グローバルオブジェクトの拡張を実装することができました。こうすることで、インスタンスベースのオブジェクト指向を実現できるのです。
メソッドのオーバライド
メソッドをオーバライドするには、以下のコードのようにします。
this.$parent = this.base( function() {
this.hoge = function() {
return 12;
};
this.$child = this.base( function() {
this.hoge = function() {
/*親オブジェクトのメソッドを呼び出す*/
return this.$parent.hoge();
};
});
});
this.$parent.$child.hoge(); //12
基本的に、カスケード継承したオブジェクトは、親オブジェクトをプロパティとしてアクセスすることができるようになります。つまり、通常の名前空間ではできないことが、継承を使って、できるようになります。
