- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
クロージャ(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); })
これでローカル変数でも外部から値を取得できるようになりました。しかし、これではまだムービークリップのように扱うことはできません。次回も引き続きクロージャについて説明していきます。
次のページ:クロージャ(3)