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

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

(Javascript)protorypeを使った継承

クラスという概念がないJavascriptで、prototypeは継承的な役割を再現することが出来ます。 コンストラクタのprototypeに継承したいコンストラクタのprototypeを代入することで、他コンストラクタのメンバを継承することが出来るようになります。

以下は、乗り物に関する情報を持つオブジェクトの生成をおこなうサンプルです。
エンジンサイズのプロパティを持つvehicleオブジェクトのコンストラクタと、そのオブジェクトを継承したcarオブジェクトのコンストラクタです。

// 乗り物を定義するvehicleオブジェクト(エンジンサイズのみを保持)
function vehicle(engeneSize)
{
    // エンジンサイズを保持
    this.engineSize = engeneSize;
}

// 車を定義するcarオブジェクト(車両タイプを情報を保持)
function car(engeineSize, type)
{
    // vehicleコンストラクタを呼び出し。
    vehicle.call(this, engeineSize);
    this.type = type;

    // 車両の説明を返すメソッド
    this.getDescription = function()
    {
        return 'this ' + this.constructor.name + ' is ' + 
                this.engineSize + 'cc ' + this.type;
    }
}
// carオブジェクトのprototypeにvehicleオブジェクトを代入
car.prototype = Object.create(vehicle.prototype);
// コンストラクタはcarに戻す
car.prototype.constructor = car;

// carをインスタンス化
var myCar = new car(1800, 'Sedan');
// 説明を表示
document.write(myCar.getDescription()); // this car is 1800cc Sedan
解説

carコンストラクタを定義した後に、Object.createを使用してvehicleコンストラクタを継承しています。この時、prototypeで行っているのがポイントです。そしてこのままではcarのコンストラクタもvehicleになってしまうので、コンストラクタを元に戻します。
最後に、carコンストラクタ内部でcallメソッドを使ってvehicleオブジェクトの実装を行っています。