グローバル変数が JavaScript で定義されていないのはなぜですか?

JavaScript でグローバル変数に未定義の値があることに驚きましたか?

JavaScript でグローバル変数が予期せず未定義の値を返す状況に遭遇したことがありますか?この複雑な例を考えてみましょう:

var value = 10;

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

    //B
    console.log(value);
}

test();

このコードの出力は多くの人を驚かせます:

undefined
20

グローバル変数が未定義である理由

このパズルの根本原因は、変数として知られる JavaScript の基本概念にあります。 hoisting. JavaScript エンジンがコードを解釈するとき、最初にコード ブロック全体をスキャンし、すべての変数宣言を先頭に「ホイスト」します。ただし、ホイストされるのは宣言のみであり、割り当てはホイストされません。

上記の例では、関数テストが実行されるとき、グローバル変数の値にはどの時点でもアクセスされません。代わりに、新しいローカル変数値が宣言され、割り当てられます。このローカル変数はグローバル変数をシャドウするため、ポイント A での console.log(value) 呼び出しの値が未定義になります。

説明

これをさらに詳しく説明すると、次のようになります。ホイスティングが発生したかのようにコードを書き直してみましょう:

// Variable declarations hoisted to the top of the function
var value = undefined;
var value = 20;

function test() {
    //A
    console.log(value);

    //B
    console.log(value);
}

これで、最初の console.log 呼び出しの理由は明らかです。未定義を返します。ローカル変数値はまだ割り当てられていません。

別の例

ホイスティングの概念を強調するために、次のコードを検討してください。

var test = 'start';

function end() {
    test = 'end';
    var test = 'local';
}

end();
alert(test);

このコードは、「end」や「local」ではなく、「start」という値を警告します。これは、変数テストが終了関数の先頭にホイストされ、グローバル変数をシャドウしているためです。

関数もホイストされています

ホイスティングは変数に適用されるだけでなく、機能にも。次のコードはこれを示しています。

test("Won't work!");

test = function(text) { alert(text); }

このコードは、test("Won't work!") が呼び出されたときに、テスト変数が宣言されているものの関数が割り当てられていないため、参照エラーをスローします。適切な関数宣言構文のみが完全なホイスティングを保証します。

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