[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>




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


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

<?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>




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

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

是非、お試しください。


 


 

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント