[ Javascript でオブジェクト指向 ] オーバーライドとオーバーロード

Tweet

Pocket

残念ながら Javascript では、オーバーロードはサポートされていません。 インターネット上で検索するといくつかの擬似的な実装方法は存在しますが、ここではもっとも単純と思われるオーバーロード風のサンプルを紹介します。オーバーライドに関しては、サポートされていると言うべきかはわかりませんが、オーバーライドに似た実装ができますので、そのサンプルを掲載しています。

Javascript でオーバーロード ( overload )

Javascript では定義したメソッドの引数よりも少ない数のパラメータで関数を呼び出すことができますので、それを利用します。 足りない分は  ‘ undefined ‘ として扱われますので、そのときにはデフォルト値を設定するようにしています。実際は、パラメータ数などによって、処理を振り分ける必要があると思います。ただ、同名でなければならない事情がない限りは、個人的な考えになりますがこの方法はあまりお薦めできません。素直に別名したほうが良いと思います。

// 四則演算クラス
var Calc = function (x) {

    // コンストラクタ
    this.x = x;
}

// プロトタイプの追加（足し算メソッド）
Calc.prototype.add = function (num1, num2, num3) {

    if (typeof num1 == 'undefined') { num1 = 0; }
    if (typeof num2 == 'undefined') { num2 = 0; }
    if (typeof num3 == 'undefined') { num3 = 0; }

    /*
     * または、arguments.length で引数の個数を取得して判断しても良いが、
     * 引数の数によって処理を振り分ければオーバーロードのように
     * 振舞うことができる
     */
     
    return this.x + num1 + num2 + num3;
}

// インスタンスを生成する
var c = new Calc(10);

alert(  c.add()         );  // 10
alert(  c.add(1)        );  // 11
alert(  c.add(1, 2)     );  // 13
alert(  c.add(1, 2, 3)  );  // 16

随分雑なオーバーロードですが、このような実装をすることができます。

Javascript でオーバーライド ( override )

Javascript で、クラスメソッドのオーバーライドを実装するサンプルスクリプトになります。オーバーロードで使用した prototype を利用して実装しています。

// 四則演算クラス
var Calc = function (x) {

    // コンストラクタ
    this.x = x;

    // プロトタイプ定義を同名のメソッドでオーバーライドする。
    this.add = function(num) {
        return this.x + num * 2;
    }   
}

// プロトタイプの追加（足し算メソッド）
Calc.prototype.add = function (num) {
    return this.x + num;
}

// インスタンスを生成する
var c = new Calc(10);

alert(  c.add(4)  );  // 18 (this.add が有効)

これで、プロトタイプで定義した add メソッドをオーバーライドしていることがわかります。ただし、これをオーバーライドと表現してよいのかは正直わかりません。こちら 『 Javascript クラスの継承とオーバーライド 』では、親クラスと子クラスを使ってオーバーライドを行うサンプルを掲載しています。より実践的なサンプルとなっていますので、よろしければご確認ください。

Javascript がオーバーロードをサポートしていないとは

先に、Javascript はオーバーロードをサポートしていないと記述しましたが、それは以下のサンプルを見ていただけるとわかると思います。パラメータ数の違う add メソッドをいくら代入しても、上書きされるだけで後に設定されたものが優先されて実行されます。

// 四則演算クラス
var Calc = function (x) {

    // コンストラクタ
    this.x = x;

    // オーバーライド
    this.add = function(num) {
        return this.x + num * 2;
    }
    
    // オーバーライドかつオーバーロード風
    this.add = function(num1, num2) {
        return this.x + num1 + num2;
    }
}

// プロトタイプの追加（足し算メソッド）
Calc.prototype.add = function (num) {
    return this.x + num;
}

// インスタンスを生成する
var c = new Calc(10);

alert(  c.add(4)     );  // NaN
alert(  c.add(4, 2)  );  // 16 (後から設定されたパラメータ2つの関数が有効)

Tweet

Pocket