JavaScript 変数の深い理解scope_javascript スキル

JavaScript の変数スコープを学習する前に、いくつかの点を明確にする必要があります:
a. JavaScript の変数スコープは、独自のスコープ チェーンに基づいています。
b. JavaScript にはブロックレベルのスコープがありません。
c. 関数内で宣言された変数は関数全体で定義されます。

1. JavaScript スコープ チェーン
まず、次のコードを見てください。

コードをコピーします コードは次のとおりです。

コードを確認します。 JavaScript はまず、変数 Rain が内部関数で定義されているかどうかを確認します。定義されている場合は、内部関数の Rain 変数が使用されます。Rain 変数が内部関数で定義されていない場合、JavaScript は Rain 変数が定義されているかどうかを引き続き確認します。このコードでは、rain 変数が Rainman 関数本体で定義されていないため、JavaScript エンジンは引き続き (グローバル オブジェクトを) 検索して、グローバル オブジェクトに Rain が定義されているかどうかを確認します。 Rain = 1 と定義されているため、最終結果は「1」と表示されます。
スコープ チェーン: JavaScript が変数をクエリする必要がある場合 2 つのオブジェクトが定義されていない場合、検索は続行されます。

上記のコードには、inner、rainman、window の 3 つのスコープ チェーン オブジェクトが順に含まれています。

2. 関数本体内では、ローカル変数は同じ名前のグローバル変数よりも優先されます。

コードをコピー コードは次のとおりです:

var Rain = 1; //グローバル変数 Rain を定義

function check(){
var Rain = 100; //ローカル変数 Rain を定義
alert (rain ); // ここに 100 が表示されます
}
alert(rain ); // ここに 100 が表示されます


3. JavaScript ブロックレベルのスコープはありません。
これは、他の言語に比べて JavaScript のより柔軟な部分でもあります。
以下のコードを注意深く見てください。変数 i、j、k のスコープが同じであり、rain 関数本体全体でグローバルであることがわかります。

コードをコピー

コードは次のとおりです: function Rainman(){ /**

* Rainman 関数本体には 3 つのローカル変数 i j k があります

*/
var i = 0;
if( 1 ){
var j = 0 ;
for( var k = 0 ; k alert( k ); // ポップアップ 0 1 2
}
alert( k ); 3
}
alert( j ); //ポップアップ 0
}



4.機能全体。
まず、このコードを観察してください。

コードをコピー

コードは次のとおりです: function Rain(){ var x = 1;

function man(){

x = 100;
}
man(); // 電話
alert( x ); // ここに 100 が表示されます
}
rain(); // 雨を呼び出します

上記のコード 変数 x が Rain 関数本体全体で使用でき、再代入できることを示しています。このルールにより、「信じられない」結果が生成されます。次のコードを観察してください。
これは、関数 Rain 内のローカル変数 x が関数本体全体で定義されているため (var x= 'rain-man'、宣言済み)、同じ名前のグローバル変数 x が Rain 関数本体全体に隠蔽されているためです。 。ここで「未定義」が表示されるのは、alert(x) が初めて実行されるとき、ローカル変数 x がまだ初期化されていないためです。

コードをコピー


コードは次のとおりです:

alert( x ); //1 の代わりに '未定義' をポップアップ var x = 'rain -man' ;

alert( x ); // 'レインマン'

}
rain()



つまり、上記の Rain 関数は以下の関数と同等です。

コードをコピー コードは次のとおりです。

function Rain(){
var x;
alert( x );
x = 'rain-man';
}

5.キーワード are はグローバル変数です。

コードをコピー コードは次のとおりです:

これは、JavaScript 初心者にとってよくある間違いであり、意図せずに多くのグローバル変数を残してしまいます。

6. グローバル変数はすべてウィンドウ オブジェクトの属性です

コードをコピーします コードは次のとおりです:

次のコードと同等

コードをコピーします コードは次のとおりです。