JavaScriptらしい継承の仕組み / LiosK-free Blog

JavaScriptらしい継承の仕組み

2007-06-14
カテゴリ: Client Side
タグ: JavaScript オブジェクト指向 Tips

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のエフェクトのコードとかを一箇所にまとめておける。

LiosK-free Blog