Tag Archives: 継承

Prototype.js で継承＆オーバーライド

by

今更ながら、Prototype.js でクラスの継承とオーバーライドをやってみた記録。

しばらく使ってなかったら、$super() という便利なものができていた。

コード例

// 基底クラス
var Parent = Class.create({
    // コンストラクタ
    initialize: function() {
        // <p> 要素を生成して <body> に挿入
        this.ele = new Element('p');
        $$('body')[0].insert(this.ele);
    }
    // “word”を画面に表示
    ,say: function(word) {
        this.ele.update(word);
    }
});

// Parent を継承したクラス
var Child = Class.create(Parent, {
    // コンストラクタ
    initialize: function($super) {
        // Parent のコンストラクタを実行
        $super();
    }
    // Parent の say() をオーバーライドする
    ,say: function($super, word, word2) {
        $super(word);
        // “word, word2”という文字列を画面に表示
        this.ele.update(this.ele.innerHTML + ', ' + word2);
    }
});

var c = new Child;

c.say('One', 'Two');
// -> 画面上に 'One, Two' と表示される。

メソッドを定義するとき第一引数に $super を与えると、親クラスの同名のメソッドへの参照が与えられる。これを使ってメソッドのオーバーライドが簡単にできるのだ。

第二引数以降は親クラスから順に与えられる。これを使って引数の数すら変えることができる。上の例で言えば、Parent クラスの say() メソッドは引数を一つ採るが、Child クラスの say() メソッドは二つ採る。