2010年03月04日

以下にJavaScriptを使ったオブジェクト指向的な書き方の例をまとめます。
※[]で囲まれた部分には、コードを書くときに自分の目的に合わせ書き換えてください。


【コード】

/*--------------------------------------------------
クラスの定義*/
//コンストラクタ関数
function [クラス名]([プロパティ1], [プロパティ2]){
    this.
[プロパティ1] = [プロパティ1];
    this.
[プロパティ2] = [プロパティ2];
}

//インスタンスプロパティ
    /*コンストラクタ関数内でthisキーワードを使い初期化*/

//インスタンスメソッド

[クラス名].prototype.[メソッド名] = function(){
    /*無名関数内に処理内容を記述*/
}

//クラスプロパティ

[クラス名].[プロパティ名] = [値];

//クラスメソッド

[クラス名].[メソッド名] = function(){
   
/*無名関数内に処理内容を記述*/
}

【説明】

<コンストラクタ関数とインスタンスプロパティについて>

・コンストラクタ関数

JavaScriptでオブジェクト指向的なプログラミングをするには、まずJavaなどでいう「クラス」を作る必要があります。
JavaScriptで「クラス」を作るには、クラスの名前の関数を宣言します。
「クラス」を作るときに使う関数を「コンストラクタ関数」と呼びます。


・インスタンスプロパティ

クラスを宣言したら、宣言したクラスを使い新しいインスタンスオブジェクトを作ることになるのですが、複数のインスタンスオブジェクト毎に持たせたいプロパティ(データ値)があれば、クラス宣言のときにあらかじめ指定しておく必要があります。


具体的には、
まず「コンストラクタ関数」の引数として使いたい数だけプロパティを記述します。

function [クラス名]([使用したい引数名1]
,[使用したい引数名2]※1){}
※1 引数の数は、使用したい分だけ記述してください。

次に、「コンストラクタ関数」の内部で「thisキーワード」を使って初期化させます。

function [クラス名]([使用したい引数名1],[使用したい引数名2]){
   
this.[使用したい引数名1] = [使用したい引数名1];
    this.[使用したい引数名2] = [使用したい引数名2];
}

※2 ここでのthisキーワードは、クラスからインスタンスオブジェクトが作られた際、作られた個々のインスタンスオブジェクトを指します。

<インスタンスメソッド>

個々のインスタンスオブジェクトに適用させたい処理のことです。
まず適用させる処理を関数で記述し、プロトタイプオブジェクトにメソッドとして追加します。

具体的には記述した関数を、

[クラス名].prototype.[関数名※3] = function([引数(あれば)]){/*処理内容*/}

の形に直し追加します。

※3に記述した[関数名]がそのまま[メソッド名]になります。
※4 インスタンスメソッドとして関数をプロトタイプオブジェクトに追加する際、関数がインスタンスプロパティを使用しているときは、そのプロパティを「this.」つきで記述します。
このthisは個々のインスタンスオブジェクトを指します。


<クラスプロパティ>

インスタンスプロパティは、インスタンスオブジェクト毎に異なる値を持ちますが、クラス全体を通して使いたい定数などがあれば、クラスプロパティとして追加します。

具体的には

[クラス名].[クラスププロパティ名] = [値];

の形で記述します。

<クラスメソッド>

インスタンスメソッドが個々のインスタンスオブジェクトに対する処理を記述したものであったのに対し、クラスメソッドは特定のインスタンスオブジェクトに依らない処理を記述するときに作ります。

具体的には
まず適用させる処理を関数で記述し、コンストラクタにメソッドとして追加します。

[クラス名].[メソッド名] = function([引数(あれば)]){/*処理内容*/}

の形に直し追加します。

【まとめ】
JavaScriptによるクラスの作り方と、インスタンプロパティ、インスタンスメソッド、クラスプロパティ、クラスメソッドの作り方をまとめました。



(21:00)

トラックバックURL

コメントする

名前
 
  絵文字
 
 

'); label.html('\ ライブドアブログでは広告のパーソナライズや効果測定のためクッキー(cookie)を使用しています。
\ このバナーを閉じるか閲覧を継続することでクッキーの使用を承認いただいたものとさせていただきます。
\ また、お客様は当社パートナー企業における所定の手続きにより、クッキーの使用を管理することもできます。
\ 詳細はライブドア利用規約をご確認ください。\ '); banner.append(label); var closeButton = $('