デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

クロージャ(2)

概要

複数のfunctionを設定

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

解説

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

前回のサンプル(closure1/03.html)でクロージャを確認します。クロージャは以下の様にfunctionをreturnで返すため、1つの値しか返すことができません。これでは変数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には2つのfunctionが設定されていますから、インスタンスでも2つの機能が利用できるのです

//---クロージャ(オリジナルの作成)
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が2つ付いたオブジェクトですから、どちらの機能を利用するか指定します。まずは下記のカウントアップさせる部分を確認しましょう。

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

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

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

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

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