hifiveのクラスモジュール紹介（その5）「インスタンスの動的な拡張」

by moongift : 2017/07/28

JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はインスタンスを動的に拡張する方法について紹介します。よりJavaScriptらしい記述が可能になります。

ベースになるクラスについて

今回のベースは以前紹介したhifiveのクラスモジュール紹介（その3）「フィールド/アクセサ」で使ったHelloClassになります。通常、このHelloClassのインスタンスに対して適当なプロパティを指定するとエラーになります。

	var hello = Hello.HelloClass.create();
	hello.unknown = "New property!";
	// -> TypeError: Can't add property unknown, object is not extensible

view raw index.js hosted with ❤ by GitHub

これを防ぐために、クラスに isDynamic: true, を定義します。

	var HelloClass = h5.cls.RootClass.extend(function (super_) {
	return {
	// クラス名（完全修飾名）
	name: 'HelloClass',

	// 動的拡張を可能にする
	isDynamic: true,

	// クラスのメソッド定義
	method: {
	constructor: function (params) {
	// 親クラスのコンストラクタ呼び出し
	super_.constructor.call(this);
	}
	}
	};
	});

view raw index.js hosted with ❤ by GitHub

こうして定義されたクラスはインスタンスのプロパティが自由に拡張できるようになります。

	var hello = Hello.HelloClass.create();

	// これはエラーになりません
	hello.unknown = "New property!";

	$("#result").val(hello.unknown);

view raw index.js hosted with ❤ by GitHub

元々JavaScriptではこういったプロパティの追加が自由にできていましたが、よりクラス設計を厳密に行うためにデフォルトでは拡張がオフになっています。とは言え、ダイナミックに項目を追加したいという場合もあると思いますので、その際に使ってみてください。

今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

From → hifive

コメントは受け付けていません。