読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)継承したオブジェクトでメソッドのオーバーライドを行う

オブジェクトを継承した場合、継承先でメソッドのオーバーライドが必要になることがあります。継承先で同じ名前のメソッドを定義することは可能ですが、その場合はただの上書きになってしまうので、継承元の処理を呼び出すことは出来ません。

継承元の機能を残しながらオーバーライドを行うためには、prototypeの中にメソッドを定義します。

以下のサンプルは、祖先を表示するgetAncesterをbeseで定義し、subでオーバーライドしています。 sub側のgetAncesterの中でbase側の同メソッドをcall関数で呼び出して、戻り値を受け取っています。

// ベースオブジェクト
function base()
{
    base.prototype.getAncestor = function()
    {
        return 'base';
    }
}

// ベースを継承したオブジェクト
function sub()
{
    base.call(this);
    
    // getAncestorをオーバライド
    sub.prototype.getAncestor = function()
    {
        // baseオブジェクトの処理を呼び出してから処理を追加
        return 'sub > ' + base.prototype.getAncestor.call(this);
    }
}
sub.prototype = Object.create(base.prototype);

    
var obj = new sub();
document.write(obj.getAncestor()); // sub > base