JavaScript の変数スコープについて学ぶ前に、いくつかの点を明確にする必要があります。
•JavaScript の変数スコープは、独自のスコープ チェーンに基づいています。
•JavaScript にはブロックレベルのスコープがありません。
•関数内で宣言された変数は関数全体で定義されます。
1. JavaScript スコープチェーン
まず次のコードを見てください。
次のようにコードをコピーします。
<script type="text/javascript"> var Rainman(){ var man = 2; function inner(){ var innerVar = 4; inner(); } Rainman() //rainman 関数を呼び出します</script>
コードアラート（雨）を観察してください。 JavaScript はまず、変数 Rain が内部関数で定義されているかどうかを確認します。定義されている場合は、内部関数の Rain 変数が使用されます。Rain 変数が内部関数で定義されていない場合、JavaScript は Rain 変数が定義されているかどうかを引き続き確認します。このコードでは、rain 変数が Rainman 関数本体で定義されていないため、JavaScript エンジンは引き続き (グローバル オブジェクト) を検索して、グローバル オブジェクトに Rain が定義されているかどうかを確認します。雨 = 1 と定義されているため、最終結果は「1」と表示されます。
スコープ チェーン: JavaScript は変数 x をクエリする必要がある場合、最初にスコープ チェーン内の最初のオブジェクトを検索します。最初のオブジェクトが定義されていない場合は、検索が続行されます。
上記のコードには、inner、rainman、window の 3 つのスコープ チェーン オブジェクトが順に含まれています。
2. 関数本体内では、ローカル変数は、同じ名前のグローバル変数よりも優先されます。
次のようにコードをコピーします。
<script type="text/javascript"> var Rain = 1; // グローバル変数 Rain 関数を定義します check(){ // ローカル変数 Rain Alert( Rain ) を定義します。 here } check (); //1 がここに表示されます</script>
3. JavaScript にはブロックレベルのスコープがありません。
これは、JavaScript が他の言語よりも柔軟な部分でもあります。
以下のコードを注意深く観察すると、変数 i、j、k のスコープが同じであり、rain 関数本体全体でグローバルであることがわかります。
次のようにコードをコピーします。
<script type="text/javascript"> function Rainman(){ // Rainman 関数本体には 3 つのローカル変数 ijk があります。 var i = 0 if ( 1 ) { var j = 0; k < 3; k++) { alter( k ); // 0 1 2 をそれぞれポップアップします } alter( k ) // ポップアップ 3 } // 0 をポップアップします }</script>
4. 関数内で宣言された変数は、関数全体で定義されます。
まず、次のコードを観察してください。
次のようにコードをコピーします。
<script type="text/javascript"> function Rain(){ var x = 1; function man(){ x = 100 } man(); // ここにコールマンアラート（x ）が表示されます。 } Rain(); // 雨を呼び出す</script>
上記のコードは、変数 x が Rain 関数本体全体で使用でき、再割り当てできることを示しています。このルールにより、「信じられない」結果が生成されます。以下のコードを観察してください。
次のようにコードをコピーします。
<script type="text/javascript"> var x = 1; function Rain(){ alert( x ); // 1 の代わりに 'unknown' をポップアップします var x = 'rain-man' / /pop 'レインマン' } Rain();</script>
これは、関数 Rain 内のローカル変数 x が関数本体全体で定義されているため (var x= 'rain-man'、宣言済み)、同じ名前のグローバル変数 x が Rain 関数本体全体に隠蔽されているためです。ここで「未定義」が表示されるのは、alert(x) が初めて実行されるとき、ローカル変数 x がまだ初期化されていないためです。
したがって、上記の雨関数は次の関数と等価です。
次のようにコードをコピーします。
関数 Rain(){ var x ; x = 'rain-man'; }
5. var キーワードを使用せずに定義された変数はグローバル変数です。
次のようにコードをコピーします。
<script type="text/javascript"> function Rain(){ //グローバル変数 x が宣言され、割り当てられます} Rain(); //100 が表示されます </script>
これは、JavaScript 初心者によくある間違いでもあり、意図せずに多くのグローバル変数を残してしまいます。
6. グローバル変数はすべてウィンドウ オブジェクトのプロパティです。
次のようにコードをコピーします。
<script type="text/javascript"> var x = 100; alter(window.x);//ポップアップ 100 アラート(x);</script>
次のコードと同等
次のようにコードをコピーします。
<script type="text/javascript"> window.x = 100 ( window.x ) </script>