Web2.0の道具箱

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>部分に表示されます。