IE8以下におけるグローバル変数の気持ち悪い挙動

Prog JavaScript

グローバル変数がIE8以下だと、他のブラウザと挙動が異なる事象があるようだ。

(参考)
http://tobyho.com/2013/03/13/window-prop-vs-global-var/

  1. Windowプロパティ指定で変数定義
  2. 別のスクリプト内で、Varをつけた同名の変数値を初期化


という特殊な例ですが。

以下サンプルコード

<html>
<head>
              <title></title>
              <script type="text/javascript">
                            window.xxx = "Yes";
              </script>
              <script type="text/javascript">
                            var xxx = xxx || "No!";
                            document.write(xxx);
              </script>
</head>
<body>
</body>
</html>

IE9以上やChrome等モダンブラウザだと、”Yes” がIE8以下だと、”No!”が表示されます。

グローバル変数にvarをつけるとローカル変数として定義されちゃうみたいですね。２つ目のscriptブロックは以下のように定義したのと同じ意味になっているぽい。

var xxx;
xxx = xxx || "No";

xxxは常にundefinedだから必ず"No"が代入される。ここまではまだ変数の巻き上げなども絡めて、理解できる。気持ち悪いのは、ここからで、実はこのコード、グローバル変数を変更している。つまり、window.xxxに"No"が代入されている。えっvarつけたのに？？

…グローバル変数名と同じ変数名は使わないようにするのが一番いいですね。