- ベストアンサー
処理のしくみがわかりません・・・
以下のスクリプトはfor文による繰り返し処理の例です。 <script type="text/javascript"> <!-- var a="あ"; var b=new Array("い","う","え","お"); function FUNC1(){ for(i=0;i<b.length;i++){ a=a+b[i]; } document.write(a); } function FUNC2(){ for(i=0;i<b.length;i++){ document.write(a=a+b[i]); } } //--> </script> FUNC1の関数を実行すると、「あいうえお」、 FUNC2の関数を実行すると、「あいあいうあいうえあいうえお」 と表示されるのは理解できます。 それで試しにこのスクリプトの最後に、 FUNC1()+FUNC2(); を追加したところ、 「あいうえおあいあいうあいうえあいうえお」 と表示されると思いきや、 「あいうえおあいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」 と表示されました。 どうもFUNC2を足す時、グローバル変数 a が "あ" ではなく、 "あいうえお" と代入されて実行されてるみたいです。 そして、FUNC1、FUNC2を実行すると、それぞれ 「あいうえおいうえおいうえお」 「あいうえおいうえおいあいうえおいうえおいうあいうえおいうえおいうえあいうえおいうえおいうえお」 と、理解不能の文字の並びになってしまいました。 なぜ FUNC1()+FUNC2(); を追加したらそれぞれの関数の実行値が変わってしまったのでしょうか? その処理の仕組みをご教授お願いいたします<(_ _)>
- spnk55
- お礼率87% (69/79)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (2)
- gimmick
- ベストアンサー率49% (134/270)
>しかし、それを例えばonClickイベントハンドラを使って >それぞれFUNC1()、FUNC2()を実行した場合、 >FUNC2()の実行結果は、当然 >「あいあいうあいうえあいうえお」 >と表示されますよね。 そのときのグローバル変数aの値に依存します。aが""だったらそうなります。 >この場合、FUNC1()の処理後もグローバル変数 a は "あ" のままだということになります。 そうはならないはずです。 >こうなると、変数 a はグローバル処理用とローカル処理用2つ存在しているようにも思えてきます。(汗) >もしくは、それぞれ別個に関数を実行する場合は、グローバル変数 a は、それぞれの関数用に >(今回の場合だと、FUNC1用とFUNC2用に) >存在しているということでしょうか? これも違います。 document.write()を使うと別ページに移動してしまってわかりにくいので、 こんなコードを書きました。これで試すとaの値が保持されているのがわかるかと思います。 ---------------------------------------------------------------------- <html> <head> <script language="JavaScript"><!-- var a="あ"; var b=new Array("い","う","え","お"); function FUNC1(){ for(i=0;i<b.length;i++){ a=a+b[i]; } write(a); } function FUNC2(){ for(i=0;i<b.length;i++){ write(a=a+b[i]); } } function write(str){ form1.a.value += str; } //--></script> </head> <body> <form name="form1"> <input type="button" value="FUNC1" onclick="a.value='';FUNC1()"> <input type="button" value="FUNC2" onclick="a.value='';FUNC2()"><br> <input type="text" name="a" size="100" readonly> <form> </body> </html>
お礼
gimmickさんとleadさんの協力のもと、 サンプルスクリプトまで提示していただき、 おかげでなんとか理解することができました。 今回はどうもありがとうございました。 またよろしくお願いいたします<(_ _)>
処理の過程を順に追ってみてはいかがでしょう。 FUNC1()の処理では、グローバル変数a自体に配列bの内容を順次加えていくため、FUNC1()の処理が終了する際にはグローバル関数自体が既にa="あいうえお"になっているものと思われます。 そのループが終わったときに、document.write(a)で変数aを書き出すと、その内容の「あいうえお」が出力されますね。 ついで、変数aが持っている値「あいうえお」がグローバル変数として扱われれば、FUNC2()の処理時には「あいうえお」に対して、bの配列の項目を一つずつ足し合わせるように定義しているので、変数aには順次配列b内の文字が再び追加されます。 ただ、こちらの処理では、ループが回るたびに変数aを再定義しつつ表示するので、ループの過程が出力されてきます。 具体的には、こちらの出力結果を追えば、ループごとに 「(あいうえおい)+(あいうえおいう)+(あいうえおいうえ)+(あいうえおいうえお)」 となります。 で、これを見直してみると、FUNC1()+FUNC2()という処理では、FUNC1()の内容が処理された 「あいうえお」 と、FUNC2()の内容が処理された 「あいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」 が平行して出力されるので、結果として 「あいうえおあいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」 という結果になると思います。 また、FUNC1()+FUNC2()を処理した後では、この処理を終了した時点で変数aの持つ値は「あいうえおいうえお」になっています。 FUNC1()の終了時の変数aの値は、「あ」に配列bの要素を順次加えた 「あいうえお」 に、FUNC2()の終了時の変数aの値はFUNC1()の処理終了後の値に、更に配列bの要素を順次加えた 「あいうえおいうえお」 になっているはずです。 そこで、更にFUNC1()を呼び出せば、変数aは三度配列bの要素を順次追加され、FUNC1()のループ終了時の変数aは 「あいうえおいうえおいうえお」 と、「あ」+(「いうえお」×3回)という結果になります。 また、上のFUNC1()の再実行の代わりに、FUNC2()を実行すれば、今度は上の「あいうえおいうえお」に対して、順次配列bの要素を足して再定義された変数aを表示するので、ループするたびに 「あいうえおいうえおい」 「あいうえおいうえおいう」 「あいうえおいうえおいうえ」 「あいうえおいうえおいうえお」 を表示します。 最終的には、 「あいうえおいうえおいあいうえおいうえおいうあいうえおいうえおいうえあいうえおいうえおいうえお」 となるでしょう。 おそらく、ここでは関数内の変数がローカル変数になっていると捉えている誤解があって、予測しない結果になったのではないかと思います。 Javascriptでは、関数内での変数は、変数名からいきなり記述すると、基本的にグローバル変数として扱われます。 ローカル変数として定義するときには、関数の中で変数を定義するときに「var 変数=値」という形式をとる必要があるでしょう。 参考になれば…見当違いでしたら、ごめんなさい。 乱文失礼しました。
補足
丁寧な回答ありがとうございます<(_ _)> アドバイスを参考に、 a=a+b[i]; の部分を a=a+b[i]+"●["+i+"回目]"+"<br>"; などに変えながらいろいろ試して、ようやく処理の流れを実感できました。 グローバル変数は、関数内でその値が変更された場合、グローバル変数自体の値が変わる・・・ というのは、上で記述している<script>～</script>の例だと、 スクリプトの最後に FUNC1(); FUNC2(); を記述した場合、FUNC1()処理後にグローバル変数 a が "あいうえお" に変更され、 FUNC2()の実行結果が 「あいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」 となることでよくわかりますね。 しかし、それを例えばonClickイベントハンドラを使って それぞれFUNC1()、FUNC2()を実行した場合、 FUNC2()の実行結果は、当然 「あいあいうあいうえあいうえお」 と表示されますよね。 この場合、FUNC1()の処理後もグローバル変数 a は "あ" のままだということになります。 でもそうなると、やはりつじつまが合わなくなるんです。 (例えば、カウンターを使って0と1を切り替えて処理を繰り返すことができなくなりますよね) こうなると、変数 a はグローバル処理用とローカル処理用2つ存在しているようにも思えてきます。(汗) もしくは、それぞれ別個に関数を実行する場合は、グローバル変数 a は、それぞれの関数用に (今回の場合だと、FUNC1用とFUNC2用に) 存在しているということでしょうか? 少々頭が混乱していて、ややこしい文章になってしまい申し訳ありません<(_ _)>
お礼
まさにツボをついた回答ありがとうございます。<(_ _)> いろいろ試してみて、他ではグローバル変数の値が変更されるのに、 今回のようなdocument.writeメソッドを使った時には、 グローバル変数の値が変わらないので、???と思っていました。 FUNC1やFUNC2を実行した後、ページを元に戻ると、 再びページロードした際に、グローバル変数 a は、 a="あ" と定義しなおされるということですね。 leadさんとgimmickさんが提示していただいた例文に加えて、 サブウィンドウを開き、そこに document.write で a の値を書き出す方法も試して、すべての謎が氷解しました。 今回はどうもありがとうございました。 またよろしくお願いいたします<(_ _)>