CALTA Project

Javascriptのデバッグって、おそらく多くの方が、FirefoxのFirebugアドオンを使って行っていると思います。このデバッガは強力ですからね。で、デバッグが終わって、Firefoxで動作確認をしたものをIEで実行してみると、動かなかったってケースって多くないですか？
有名なケースでは、これ。

1
2
3
4
5

var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3",
};

「”string3″」の後の「,」が元凶です。最後の「,」があると、IEでは動きません。この「,」を入れてしまったばっかりに、Firefoxではちゃんと動いていたものがまったく動かなくなってしまって、はまったという人は、ものすごく多いと思います。

ほかにも、いくつかの事例があると思いますが、ちょっとレアなものを発見したのでご紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
//< ![CDATA[
var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3"
};
 
for  ( item in data ) {
    document.write ( data[item] + '＜br/＞' );
};
//]]>;
</script>

これってIEだと動きません。 もちろん、「”string3″」の後ろに「,」はありません。
for ～ in構文 は、オブジェクトのプロパティ名を列挙します。つまり、data.item1, data.item2, data.item3を順に出力することを意味してます。したがって、”string1″, “string2″, “string3″ という文字列が出力されます。

でも、IEだと動きません。オブジェクトエラーとなります。Firefox、Operaでは問題なく動くのですが。

こうしてみましょうか？

1
2
3

for  ( itm in data ) {
    document.write ( data[itm]　+ '＜br/＞' );
};

itemをitmに変えただけです。これは動きました。
# itemをitmに変えようという発想にいたるまで、かなり時間を要しました。

では、これはどうでしょう？

1
2
3
4

var item;
for  ( item in data ) {
    document.write ( data[item]　+ '＜br/＞' );
};

itemという変数を局所化してみました。
・・・動きます。

つまり、IEでは、大域変数itemが示すオブジェクトが存在するということにほかなりません。大域変数itemにオブジェクトのプロパティ名をセットしようとすると、オブジェクトエラーになるのですから。

では、このitemというオブジェクトの中身は何なのでしょう？さきほどの、for ～ in構文を使って、itemのプロパティを列挙してみました。

1
2
3

for  ( property in item ) {
    document.write( property + ':' + item[propery] + '＜br/＞' );
};

当然ですが、このコードはIEのみでしか動きません。
出力した結果をちょっと整形したら、itemはこのようなオブジェクトであることがわかります。

注）DontEnum 属性を持つプロパティはfor ～in構文では列挙できないため（詳しい解説）、これがitemの全貌ではないかもしれません。

このような事例にであうケースはそうそうないと思いますが、itemという変数を使用する際は注意した方がよいですね。

この記事へのトラックバックURL: