jQuery入門講座使い方-クロージャ(2)

クロージャ(2)

概要

複数のfunctionを設定

前回のサンプル（closure1/03.html）ではwatchボタンをクリックしても変数cntを表示することはできませんでした。変数cntはローカル変数ですから外部から直接アクセスできないのです。変数cntの値を得るためには、その値を返すfunctionを追加して対応しなければなりません。ここではクロージャに複数のfunctionを設定する方法を説明します。

解説

returnは1つしか値を返せないから...

前回のサンプル（closure1/03.html）でクロージャを確認します。クロージャは以下の様にfunctionをreturnで返すため、１つの値しか返すことができません。これでは変数cntの値を返すfunctionを追加できません。

//---クロージャ（オリジナルの作成）
function countMaster() {
	var cnt = 0;
	function countUpFunc() {
		cnt++;
		$(".cnt").text(cnt);
	}
	return countUpFunc;
}

しかしobjectオブジェクトを利用することで複数のfunctionを返すことが可能になります。objectオブジェクトのプロパティとして複数のfunctionを設定し、そのオブジェクトをreturnによって返せば良いのです。

サンプル（closure2/01.html）を開き、以下の部分を確認して下さい。以下の4行目でobjectオブジェクト「myObj」を新規に作成しています。続く6〜9行目では、このオブジェクトにプロパティ「countUp」を設定し値として変数cntをカウントアップする機能（function）を設定します。

同じようにして10〜12行目では変数cntの値を返すだけの機能をプロパティ「getCnt」として設定しました。そして13行目の部分でobjectオブジェクト「myObj」を返すようにします。myObjには２つのfunctionが設定されていますから、インスタンスでも２つの機能が利用できるのです。

//---クロージャ（オリジナルの作成）
function countMaster() {
	var cnt = 0;
	var myObj = new Object();
					
	myObj.countUp = function () {
		cnt ++;
		$(".cnt").text(cnt);
	}
	myObj.getCnt = function () {
		return cnt;
	}
	return myObj;
}

初期化と実際の利用

では初期化の部分を確認します。前回と同じなのですが、返値で渡されるのはfunctionではなくobjectオブジェクトなので、受け取る変数名をcntObjと変更しました。

//---クロージャ（インスタンスの作成）
cntObj = countMaster();

次は実際に利用する部分です。cntObjにはfunctionが２つ付いたオブジェクトですから、どちらの機能を利用するか指定します。まずは下記のカウントアップさせる部分を確認しましょう。

カウントアップさせる機能を入れたプロパティはcountUpですから、以下の様にcountUpを指定します。countUpはfunctionが設定されていますから実行するためには以下の様に後ろに()を付けることを忘れないで下さい。構文的にはメソッドと同じです（実際にメソッドです。メソッドは機能を持ったプロパティなのです）。

$(".up").click(function () {
	cntObj.countUp();
})

変数cntを表示する部分も同様です。以下の様にcntObjに対してgetCntを実行するだけです。getCntは変数cntの値を返すので、その値を変数cntで受け取りアラートで表示します。

$(".disp").click(function () {
	var cnt = cntObj.getCnt();
	alert(cnt);
})

これでローカル変数でも外部から値を取得できるようになりました。しかし、これではまだムービークリップのように扱うことはできません。次回も引き続きクロージャについて説明していきます。

次のページ：クロージャ(3)