いいかげんちゃんとした技術記事を書こうかなということで、今回から隔日でJavaScriptに関する記事を書いていこうかと思います。
といっても私自身そこまで詳しいわけではないので、記事のレベルは低めになると思いますが、JavaScriptに関する最低限の知識は必要です。
というわけで、記念すべき第1回は「JavaScriptでクラスを定義する」方法を解説します。
ただしプロトタイプ関連の話は今回は割愛します。
概要
JavaScriptでのクラス定義は、「コンストラクタ」という特殊な関数で「プロパティ」や「メソッド」などの「メンバ」を定義することで行います。
コンストラクタやメソッドは基本的には通常のメソッドと同じですが、
・「this」ステートメントが関数自身ではなくインスタンスを参照すること。
・「this」ステートメントのメンバを自由に定義できること。
・コンストラクタに 「new」ステートメントをつけて実行すると、「return」ステートメントを記述しなくてもインスタンスを返すこと。
などが異なります。
落とし穴として、「無名関数」・「ネスト関数」・「コールバック」などでは「this」ステートメントがインスタンスを参照しないので、必要に応じてほかの方法でインスタンスを渡す必要があります。
コンストラクタの定義
コンストラクタの定義は以下のように行います。
function クラス名(パラメータ) {
//プロパティの宣言
this.プロパティ名;
//プロパティの宣言と初期化
this.プロパティ名 = 初期値;
//メソッドの宣言
this.メソッド名 = 関数名;
this.メソッド名 = function() { };
}
ここで、メソッドにする関数は、＜クラス名_メソッド名＞のような名前で宣言しておき、コンストラクタでプロパティ同様に定義します。
当然ですが、この関数をグローバル関数として呼んでもインスタンスが参照できないので正常に実行できません。
メソッドの定義
メソッドの定義は以下のように行います。
function クラス名_メソッド名(パラメータ) {
//処理
var _this = this;
function ネスト関数(パラメータ) {
_this.プロパティ;
}
}
基本的に普通の関数と変わりませんが、「this」ステートメントからインスタンスを参照できます。
ただし、再三いっているようにネスト関数などからインスタンスを参照したい場合は参照できるうちに変数に退避したりパラメータで渡す必要があります。
活用例
ここまで随分と面倒なことをしてきたわけですが、どういった利点があるのかわからない人はオブジェクト指向について学んでください。
といいたいところですが、いくつか例を挙げてみます。
１つ目は、JavaScriptの基本ともいえるDHTML-DOMを使用したプログラムです。
こういったプログラムでは、特定の要素の内容を変更して表示を行いますが、クラスを用いることで複数表示できたり、直感的に操作を行えます。
２つ目は、若干複雑なデータを扱う場合に処理をカプセル化できます。
３つ目は、ライブラリとして配布する際に変数の重複を防ぐことができます。
このほかにもいろいろと利点があります。