グローバル JavaScript 変数が関数内で未定義のように見えるのはなぜですか?

JavaScript 変数のホイスト: 未定義のグローバル値の探索

この記事では、JavaScript のグローバル変数の驚くべき動作、特にグローバル変数が次のように見える場合の驚くべき動作について説明します。関数内の未定義の値。

Case:

以下の例では、グローバル変数の値は 10 に初期化されています。ただし、テスト関数内でアクセスすると、未定義のログが記録されます。

var value = 10;
function test() {
    //A
    console.log(value);
    var value = 20;

    //B
    console.log(value);
}
test();

出力:

undefined
20

吊り上げ中JavaScript:

この動作の背後にある現象は、JavaScript 変数ホイスティングとして知られています。これは、関数内で宣言されたすべての変数が、使用後に宣言された場合でも、関数のスコープの先頭に「ホイスト」または移動されることを指示します。

上記の例では、値変数は、テスト関数の先頭。ただし、宣言のみが解除され、割り当て (初期化) は解除されません。したがって、console.log(value) が呼び出されると、ホイストされているが割り当てられていない変数にアクセスし、未定義になります。

説明:

この動作は、次のように理解できます。同等のコード:

var value; // Global
function test() {
    console.log(value); // Accessing the hoisted but undefined value

    value = 20; // Local assignment
    console.log(value); // Accessing the locally assigned value
}

サイドノート: のホイスティングFunctions:

ホイスティングは関数宣言にも適用されます。関数が宣言される前に呼び出された場合、その識別子がまだ割り当てられていない場合でも、関数は実行されます。

例:

test("Won't work!"); // Error

test = function(text) { alert(text); }; // Function assignment

test への最初の呼び出しその時点では関数が宣言されていないため、失敗します。ただし、最初の呼び出し後に関数がホイストされて割り当てられるため、2 番目の呼び出しは成功します。

結論:

JavaScript のホイスティング メカニズムは、特にアクセスする場合に予期しない結果を引き起こす可能性があります。関数内のグローバル変数。ホイスティングのニュアンスを理解することは、堅牢でエラーのない JavaScript コードを作成するために非常に重要です。

以上がグローバル JavaScript 変数が関数内で未定義のように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。