JavaScriptの関数の中で宣言する変数のスコープについて理解を深めましょう。
基本は、varを使って変数を宣言するようにしましょう。そうすることで、グローバル変数(正確にはwindowオブジェクトのプロパティ)と、関数内の変数(正確には関数オブジェクトのプロパティ)が確実に別々のものになります。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>setInterval sample 1</title> </head> <body> <div id="log" style="position:absolute;"></div><br /> <script> var t = 'a:' + a + '<br />'; t = t + 'f0():' + f0() + '<br />'; var a = 'グローバル a'; function f0() { var a = 'ローカル a'; return a; } // varを省略 b = 'グローバル b'; t = t + 'b:' + b + '<br />'; function f1() { b = 'ローカル b'; // グローバル変数が使われる return b; } t = t + 'f1():' + f1() + '<br />'; // b が上書きされていることが確認できる t = t + 'b:' + b + '<br />'; var c = 'グローバル c'; t = t + 'c:' + c + '<br />'; function f2() { alert('f2_c 1:' + c); // ローカル変数のcは定義されていないのでundefined var c = 'ローカル c'; alert('f2_c 2:' + c); // ここでは初期化されているので ローカル c return c; } t = t + 'f2():' + f2() + '<br />'; // ローカル c // スコープチェーンの確認 // 一番近い変数が使われることがわかる var d = 'グローバル d'; function f3() { var d = 'ローカル d'; function _f3() { var a = '_f3 ローカル a'; alert('a,d:' + a + ',' + d); } _f3(); } f3(); document.getElementById('log').innerHTML = t; </script> </body> </html>
実行結果は次のようになる。alert関数による表示については省略している。
a:undefined f0():ローカル a b:グローバル b f1():ローカル b b:ローカル b c:グローバル c f2():ローカル c
JavaScriptについては、下記の書籍の参考になるでしょう。
プログラミング言語一般については、下記が参考になるでしょう。
- クラスベースのオブジェクト指向プログラミング言語の基礎を学ぶには … 改訂版 基礎Java(CD-ROM付) (IMPRESS KISO SERIES)
- クラスベースのオブジェクト指向プログラミング言語を学ぶには … プログラミング言語Java (The Java Series)
- 関数型プログラミング言語を学ぶには … Scalaスケーラブルプログラミング第2版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)