まめージェント

Android, GAE, AngularJSの技術ネタ中心。Twitter: @mame01112

Javascriptでデザインパターン (その2: Factory)

今回は、Factoryパターン。

前回(http://mame0112.hatenablog.com/entry/2015/07/26/130425)に続き、今回はFactoryパターン。

Factoryパターンとは?

Wikipedia的には、"他のクラスのコンストラクタをサブクラスで上書き可能な自分のメソッドに置き換えることで、 アプリケーションに特化したオブジェクトの生成をサブクラスに追い出し、クラスの再利用性を高めることを目的とする"パターンとのこと。

僕の言葉で置き換えると、”同じ「作る」という動作をするにしても、何を作るかは変わるよね(下記のサンプルコードだと「製品」でも、車とバイクがあったり。で、その「製品」を作る人は「作る」しか意識したくないし(=再利用製を高める)、作る対象もフレキシブルに増やしたりしたいから、その「作る」と「製品の具体的な内容」を疎結合にしたいパターンだよ、ですかね)”
Java的には、Factory, ConcreteFactory, Creator, ConcreteFactoryの4つが登場人物です。

それぞれ、
・Factory: ”製品”を定義する人
・ConcreteFactory: "製品"の中身を定義する人(下記の例では、車やバイクによって変わる)
・Creator: ”作る”を定義する人・
・ConcreteFactor: "作る”の中身を定義する人。(下記の例では、"create"や"use"のメソッドの中身を定義する)

サンプルコード

// Product
var Product = function(){
	console.log("Product constructor");
};

//Creator
Product.prototype = {
	create : function(){
		console.log("Product create");
	},

	use : function(){
		console.log("Product use");
	}
};

// Concrete Creator
var CarFactory = {

	//Concrete Product
	createCar : function(){
		var car = new Product();
		car.create = function(){
			console.log("Create car");
		};
		car.use = function(){
			console.log("Use car");
		};
		return car;
	},

	//Concrete Product
	createBike : function(){
		var bike = new Product();
		bike.create = function(){
			console.log("Create bike");
		};
		bike.use = function(){
			console.log("Use bike");
		};
		return bike;
	}
};

var car = CarFactory.createCar();
car.create();
car.use();

var bike = CarFactory.createBike();
bike.create();
bike.use();

このコードのキモは、
・Productの中身を、prototypeで中身の定義を委譲する
・CarFactoryで、作るプロダクトの種類を吸収する
あたりでしょうか。

今回のは、Factoryパターンが理解できていればそんなにJavascript的な難しさはないなー、という感じでした(前回のシングルトンの方が、Javascriptの言語的な難しさがあり、僕には敷居が高かった・・・)