[Flex][AS3]関数クロージャーの作成

関数クロージャーについて
[参考URL:http://livedocs.adobe.com/flex/3_jp/html/help.html?content=03_Language_and_Syntax_21.html]

addEventListennerなどで、いちいちイベントハンドラを作成していませんか？
そんな時は関数クロージャーがお勧めです。

関数クロージャーを活用する事により、より汎用的ですっきりとしたコードにする事が出来ます。
以下において、その活用例を紹介いたします。

関数クロージャーを使用しない一般的なイベントリスニングのパターンは以下の通り
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
       
        /**
         * ボタンクリックでタイマーを処理するサンプル
         */
        private function timerBtn_clickHandler():void
        {
            // タイマーの作成
            var timer:Timer = new Timer(1,1000);
            // タイマーイベントをリスニング
            timer.addEventListener(TimerEvent.TIMER, timerHandler);
            // タイマースタート
            timer.start();
        }

        private function timerHandler(event:TimerEvent):void
        {
            Alert.show("タイマーです");
            //タイマーストップ
            Timer(event.currentTarget).stop();
        }
    ]]>
    </mx:Script>

    <mx:Button id="timerBtn" click="timerBtn_clickHandler()"
        x="309" y="64" label="ボタン"/>
</mx:Application>

上記の様に、２つのイベントハンドラにおいて処理を行います。
明確に処理の分断を行うシーンでは、上記の様に実装すべきですが、
ちょっとした処理などでイベントハンドラを乱立させては、分かりづらいコードになってしまいます。


以下は、クロージャーを使用したサンプルになります。
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        
        /**
         * ボタンクリックでタイマーを処理するサンプル
         */
        private function timerBtn_clickHandler():void
        {
            // タイマーの作成
            var timer:Timer = new Timer(1,1000);
            // 関数クロージャーの作成
            var timerHandler:Function = function(event:TimerEvent):void
                                        {
                                            Alert.show('タイマーです');
                                            timer.stop();
                                        }
            
            // タイマーイベントをリスニング
            timer.addEventListener(TimerEvent.TIMER, timerHandler);
            // タイマースタート
            timer.start();
        }    
        
    ]]>
    </mx:Script>

    <mx:Button id="timerBtn" click="timerBtn_clickHandler()"
        x="309" y="64" label="ボタン"/>
</mx:Application>

関数クロージャーを作成し、タイマーイベントのリスニング時に
作成したクロージャーを指定しました。
更に省略したパターンは以下の通り。
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        
        /**
         * ボタンクリックでタイマーを処理するサンプル
         */
        private function timerBtn_clickHandler():void
        {
            // タイマーの作成
            var timer:Timer = new Timer(1,1000);
            // タイマーイベントをリスニング
            timer.addEventListener(TimerEvent.TIMER, 
                function(event:TimerEvent):void
                {
                    Alert.show('タイマーです');
                    timer.stop();    
                });
            // タイマースタート
            timer.start();
        }    
        
    ]]>
    </mx:Script>

    <mx:Button id="timerBtn" click="timerBtn_clickHandler()"
        x="309" y="64" label="ボタン"/>
</mx:Application>

上記では、タイマーイベントリスニング時に直接関数をコーディングしました。
とてもすっきりしたコードになります。

更に、関数クロジャーの定義により再帰呼び出しなども可能となりますので
知っておくと活用シーンは多くなります。

是非、お試しください。