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版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)