JavaScript
デザインパターン

JavaScriptでPrototype Pattern

More than 5 years have passed since last update.

メモ代わり

GoF曰く→既存のオブジェクトのコピーであるテンプレートを元にオブジェクト生成を行うこと


  • jsで実装が簡単(もともとprototypeベースだし)

  • jsで継承を簡単に実装出来る。

  • 継承の実行時には関数のコピーを生成するのではなく、参照が作成される

  • わかりやすい(個人的に)

以下が例


prototype.js


var myCar = {
name: "Ford Escort",
drive: function(){
console.log("I'm driving!");
},

panic: function(){
console.log("Wait, How do you stop this thing?");
}

};

// 車のインスタンスを作成するためにObject.createを利用
var yourCar = Object.create(myCar);

console.log(yourCar.name); // Ford Escort

// Object.createは第二引数でオブジェクトのプロパティを初期化出来る

var vehicle = {
getModel: function(){
console.log( "The model of this vehicle is…" + this.model );
}
}

var car = Object.create(vehicle, {
id: {
value: MY_GLOBAL.nextId(),
// default: writable: false, configurable: false
enumerable: true
},

model: {
value: "Ford",
enumerable: true
}

});

// Object.createを使わずに実装する場合
// しかしこのやり方だと読み取り専用プロパティを生成出来ない
// vehiclePrototypeは書き換えられる可能性がある(defineProperties使えばいい?)

var vehiclePrototype = {
init: function(carModel){
this.model = carModel;
},

getModel: function(){
console.log("The model of this vehicle is " + this.model);
}
};

function vehicle(model){
function F(){};
F.prototype = vehivlePrototype;

var f = new F();

f.init(model);
return f;
}

var car = vehicle("Ford Escort");
car.getModel();

// こういう感じにも実装できる
var beget = (function(){
function F(){};

return function(proto){
F.prototype = proto;
return new F();
}
})();

var car = beget(vehiclePrototype);
car.init("hoge");
car.getModel(); // The model of this vehicle is hoge