hifiveのクラスモジュール紹介（その2）「継承」
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はクラスの基本機能でもある継承について紹介します。
ベースになるクラスについて
まずベースになるクラス、AnimalClassについて紹介します。名前と鳴き声を紹介するメソッドがあります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var AnimalClass = h5.cls.RootClass.extend(function (super_) { | |
| return { | |
| // クラス名（完全修飾名） | |
| name: 'AnimalClass', | |
| // クラスのフィールド定義 | |
| field: { | |
| _name: null, | |
| _voice: null | |
| }, | |
| // クラスのメソッド定義 | |
| method: { | |
| constructor: function (params) { | |
| // 親クラスのコンストラクタ呼び出し | |
| super_.constructor.call(this); | |
| this._name = params; | |
| }, | |
| hello: function() { | |
| return this._name; | |
| }, | |
| cry: function(name, voice) { | |
| return name + "'s crying voice is " + voice; | |
| } | |
| } | |
| }; | |
| }); | |
継承する
このAnimalClassを継承するクラスとして、DogClassとCatClassを作成します。この時、 AnimalClass.extend を使います。コンストラクタは必須のメソッドになります。また、この時点で親のフィールド（voice）にアクセスできます。親のコンストラクタを呼び出す際には
`super.constructor.call(this, params);` を使います。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var DogClass = AnimalClass.extend(function (super_) { | |
| return { | |
| name: 'DogClass', | |
| method: { | |
| constructor: function (params) { | |
| super_.constructor.call(this, params); | |
| this._voice = 'bow wow'; | |
| }, | |
| cry: function() { | |
| return super_.cry(this._name, this._voice); | |
| } | |
| } | |
| } | |
| }); |
CatClassも殆ど同じ実装になります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var CatClass = AnimalClass.extend(function (super_) { | |
| return { | |
| name: 'CatClass', | |
| method: { | |
| constructor: function (params) { | |
| super_.constructor.call(this, params); | |
| this._voice = 'mew'; | |
| }, | |
| cry: function() { | |
| return super_.cry(this._name, this._voice); | |
| } | |
| } | |
| } | |
| }); | |
このように共通化される機能は親クラスに入れられるようになります。
使い方
継承したクラスは通常のクラスと同じように実装できます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var dog = Animal.DogClass.create('Hachi'); | |
| $("#dog").val(dog.cry()); | |
| // -> Hachi's crying voice is bow wow | |
| var cat = Animal.CatClass.create('Tama'); | |
| $("#cat").val(cat.cry()); | |
| // -> Tama's crying voice is mew |
サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。
コメントは受け付けていません。