変数1回目?

NoScript等にクロスサイトスクリプトの疑惑判定がされる為、最初の『script』を半角カナにしています。

<ｽｸﾘﾌﾟﾄ type="text/javascript">
<!--//〔パターン1〕
a = 2;//←グローバル変数
//↑aに2を入れる
function ab(){
 a = 1;//←aに1を入れる
 //2関数内が最初に実行される
 document.write("a="+a);
}
//↓1最初に関数abを呼び出す
ab();
//↓単なる改行
document.write("<br />");
//↓3最後にｽｸﾘﾌﾟﾄ内の変数を表示
document.write("a="+a);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン2〕
var b = 2;//←グローバル変数

function cd(){
 var b = 1;

 document.write("b="+b);
}

cd();

document.write("<br />");

document.write("b="+b);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン3〕
var c = 2;//←グローバル変数

function ef(){
 c = 1;

 document.write("c="+c);
}

ef();

document.write("<br />");

document.write("c="+c);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン4〕
d = 2;//←グローバル変数

function gh(){
 var d = 1;

 document.write("d="+d);
}

gh();

document.write("<br />");

document.write("d="+d);
//--></script>
<br />

それぞれ4つは、同じ動作をします。
最初の変数と関数内functionの変数を1回づつ表示します。
言わずもがなですが、大前提として上から順に実行されます。
パターン1で言いますと、
グローバル変数aに2が入れられます。
なぜグローバル変数と言い切れるかですが、
例のおまじない(<script～/script>)の中で
関数外でaという変数を立てましたよと、宣言しているからです。
つぎの関数function、名前がabは
呼び出されるまでは素通りされます。
そして、その下のab();で初めて関数が呼び出されるわけです。
このなかで(いまはどちらか言いませんがとにかく)
aの値を表示しなさいと、document.writeで表しています。
つづき、単なる改行を経て、
最後でこれまたどちらか分かりませんが、
とにかくaの値を表示しなさいとなるわけです。

さて、たとえば、パターン1のみ実行すると、
次のように?には変数の内容が表示されます。
つまり、1か2のいずれかです。
a=?
a=?
このように関数の外と中で変数をそれぞれ呼び出すと
各変数の値はどうなるでしょう?

答えは…
a=1　　b=1　　c=1　　d=1
a=1　　b=2　　c=1　　d=2
のように4つのパターンで違いが出ます。
パターン1とパターン3は関数の中の変数は
中だけのローカル変数のようで、実はグローバル変数と認識されます。
パターン2とパターン4では、
グローバル変数とローカル変数は別の変数として認識されます。
（各、1番目がグローバル変数、2番目がローカル変数）
同じ名前ですが別物と扱われるんですね。

つまり意識しなければならないということですね。
うっかりしてると、思いがけないバグの要因になります。
良く推奨されているのは、
グローバル変数もローカル変数も、
最初に『var』をつけて変数ですよ!と宣言しておく、
〔パターン2〕がいいようです。
かくいう自身、最初はおかしいと思いつつ、
結果が同じだったので、全て動作が同じと書いてました。

グローバル変数はどこからでも見える（参照できる）わけです。
ローカル変数は関数の中でしか見えないわけですね。

タグ：JavaScript ジャバスクリプト グローバル変数 ローカル変数