ActionScript - ループ中でクロージャ作る際の注意点

torus solutions!さんのエントリShibuya.js: ActionScript でクロージャ、継続渡しを読んで、以前クロージャでハマった時のことを思い出した。以下、動作環境 ActionScript2.0 + Flash8 前提でのお話。

まずはクロージャ基本形

function setFunc (){
    var lex = '1 dayo';
    return function (){ return lex };
}
var obj = {};
obj.func = setFunc();
trace( lex );        // undefined
trace( obj.func() ); // 1 dayo

これをループ中におこなうと・・・

// set closure
var arr = [];
for (var i=0;i<3;i++){
    var obj = {};
    var lex = i + ' dayo';
    obj.func = function (){ return lex };
    arr.push(obj);
}

// and see what happens...
for (var i=0; i<arr.length; i++){
    trace( arr[i].func() );
}

わざわざ setFunc() 関数を用意するの面倒なので、ループ iteration の中で直接無名関数を作っちゃおうとしているのがポイント。で、これの実行結果は:

2 dayo
2 dayo
2 dayo

これはまずい

ループ中に定義した3つのオブジェクトすべての func メソッドが、ループ最後に定義したものにすべて置き換わってしまってます。なんてこった。

正しいかたち

正常に動作させるには、下記コードのように、クロージャを返す関数をループの外で定義しておいた上で、ループ中からはきちんと引数渡しの形で同関数をコールするように形式に変える必要があります:

function setFunc (v){
    return function (){ return v };
}

// set closure
var arr = [];
for (var i=0;i<3;i++){
    var obj = {};
    var lex = i + ' dayo';
    obj.func = setFunc(lex);
    arr.push(obj);
}

// and see what happens...
for (var i=0; i<arr.length; i++){
    trace( arr[i].func() );
}

実行結果:

0 dayo
1 dayo
2 dayo

ふう。これで問題なしと。閉じ込めたい変数がたくさんある場合、いちいち引数渡しする事を面倒くさがったのが裏目に出ちゃいました。

追加検証1 - Perl で同じ事してみた場合

ActionScriptで挙動がおかしかったコードと同じものを Perl でも試してみました:

#!/usr/bin/perl
use strict;
my @arr;
for my $i (1 .. 3){
    my $obj = {};
    my $lex = $i . ' desu';
    $obj->{func} = sub { return $lex };
    push(@arr,$obj);
}

# see what happens
for my $obj (@arr){
    print $obj->{func}() . "\n";
}

実行結果:

1 dayo
2 dayo
3 dayo

期待通りの結果。こうしてPerlでうまく動くんだったら、やっぱりActionScriptがイケてないのでは？・・・なんて、なんでもかんでもPerl基準で物事を捉えてしまう症候群。

追加検証2 - Javascript で同じ事してみた場合

じゃあ Javascript だとどうよ？

<script type="text/javascript">
// set closure
var arr = [];
for (var i=0;i<3;i++){
    var obj = {};
    var lex = i + ' dayo';
    obj.func = function (){ return lex };
    arr.push(obj);
}

// and see what happens...
for (var i=0; i<arr.length; i++){
    alert( arr[i].func() );
}
</script>

実行結果

2 dayo
2 dayo
2 dayo

あらびっくり。ActionScript (macromedia) が悪いんじゃないみたい。というわけで、結論:

ActionScript / Javascript 等のECMA準拠スクリプトでは、ループ中にクロージャ作る際は横着するべからず。

関連情報

• torus solutions! - Flash でクロージャ。
• naoyaのはてなダイアリー - Perl のクロージャ