« JavaScriptのコンストラクタ関数 | メイン | White Box Enterprise Linux »

JavaScriptオブジェクトの継承定義

JavaScriptはプロトタイプベースのオブジェクト指向言語と言われています。prototypeプロパティを使ってコンストラクタに新たなプロパティを追加したり、オブジェクトの継承関係を定義できます。

Fooオブジェクトのコンストラクタ関数が以下であるとします。

function Foo(){
    // オブジェクトのプロパティ
    this.name='ふ~';
    // メソッド
    this.display=function(){
        document.getElementById('display').innerHTML=this.name;
    }
}

Fooオブジェクトにageプロパティを追加したい場合は以下のように書きます。

Foo.prototype.age=20;

この後、Fooコンストラクタで生成されたオブジェクトはみなageプロパティを持つことになります。

Fooを継承したBarオブジェクトの定義は以下のようになります。

function Bar() {
    this.country='日本';
    this.display=function(){
        document.getElementById('display').innerHTML=
        this.name + "の年齢は" + this.age + 
        "、国籍は" + this.country + "です";
    }
}
Bar.prototype = new Foo();

重要な行はBar.prototype = new Foo();です。BarオブジェクトはベースのFooオブジェクトのプロパティとメソッドを継承することを指定しています。Barオブジェクトではcountryプロパティが追加されており、displayメソッドがオーバーライドされています。

Barオブジェクトを生成して表示するコードは以下です。

var bar=new Bar();
bar.display();

実行すると、「ふ~の年齢は20、国籍は日本です」が<div id="display"></div>部分に表示されます。