JavaScriptらしい継承の仕組み

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptらしい継承の仕組み

JavaScriptは言語機構として継承の仕組みは備えていない。だから、cloneメソッド作ってみたり、Object.extendを使ってみたりといろんなことをするわけだが、今日のバイト中にふとシンプルな継承の仕組みを思いついた。

コンストラクタ内でreturn文を実行することで任意のオブジェクトを返せる仕様を使った仕組みで、厳密には継承とは言えないけど、使える場面は多いと思う。

基本形

/* 親クラス */
var SuperClass = function() {}
SuperClass.prototype = {};

/* 子クラス */
var SubClass = function() {
    var o = new SuperClass();
    o.field = 'hello world';
    o.method = function() {
        window.alert(this.field);
    }
    return o;
}

/* 使用例 */
var obj = new SubClass();
obj.method();    /* hello world */

newして返されるのは、紛れもなくSuperClassのインスタンスである。このSubClass関数は、単にSuperClassインスタンスを生成するファクトリー関数に過ぎない。

でも、newキーワードでオブジェクトを生成して、親クラスにないメソッドを使えるとなると、見た目には継承が実現されているようにしか見えない。上のコードで、

window.alert(obj instanceof SubClass);    /* false */

とかやらない限りはぼろは出ないはずだ。

Elementとかを継承しちゃう

実はこのコードが真価を発揮するのは↓のようなクラスを書いたとき。

var Container = function() {
    var div = document.createElement('div');
    div.show = function() { this.style.display = ''; }
    div.hide = function() { this.style.display = 'none'; }
    return div;
}

var o = new Container();
o.innerHTML = 'ContainerTest';
o.onclick = function() {
    this.hide();
    setTimeout(function() { o.show(); }, 1000);
}
document.body.appendChild(o);

つまり、組み込みオブジェクトみたいにprototype的に継承するとうまくいかないときや、そもそもnewするためのコンストラクターが存在しないとき。

まとめ

div要素を継承してコンテナクラスを作っとくと便利かも。script.aculo.usのエフェクトのコードとかを一箇所にまとめておける。

スポンサーサイト

関連記事

トラックバック URL

http://liosk.blog103.fc2.com/tb.php/16-be22fb0f

トラックバック

コメント

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。