- 索引
- 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を設定
前回のサンプル(05/03_03.html)でwatchボタンをクリックしても変数cntを表示することはできませんでした。変数cntはローカル変数ですから外部から直接アクセスできないのです。ですから変数cntの値を返すfunctionを追加して対応します。
しかしクロージャ(オリジナル)では以下の様にfunctionをreturnで返します。returnは1つの値(function)しか返すことができません。
//---クロージャ(オリジナルの作成)
function countMaster() {
var cnt = 0;
function countUpFunc() {
cnt++;
$(".cnt").text(cnt);
}
return countUpFunc;
}
そこで利用するのがobjectオブジェクトです。objectオブジェクトのプロパティとしてfunctionを設定し、そのオブジェクトをreturnによって返すことで対応します。
サンプル(05/04_01.html)を開き、以下の部分を確認して下さい。以下の3行目でobjectオブジェクト「myObj」を新規に作成しています。続く5〜8行目では、このオブジェクトにプロパティ「countUp」を設定し値として変数cntをカウントアップする機能(function)を設定します。
同じようにして9〜11行目では変数cntの値を返すだけの機能をプロパティ「getCnt」として設定しました。そして最後12行目の部分で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)