この JavaScript コードが「10」ではなく「1」を警告するのはなぜですか?

興味深い例を通じて JavaScript のホイスティングとスコープを理解する

最近の記事で、Ben Cherry は JavaScript のホイスティングとスコープの興味深い概念を明らかにしています。 。説明のために、彼は次のコードを提示します。

var a = 1;

function b() {
    a = 10;
    return;

    function a() {}
}
b();
alert(a);

期待 vs. 現実

関数 a により、直感的にはアラートに「10」が表示されると予想されるかもしれません。 b 内で宣言されます。ただし、ブラウザには代わりに「1」が表示されます。

ホイスティングとスコープの詳細

ホイスティングとは、関数がスコープの先頭に移動される現象です。これは、次のコードがインタプリタによって書き換えられることを意味します:

function b() {
  a = 10;
  return;
  function a() {}
}

興味深いことに、JavaScript では構文 function a() {} を使用して関数内で変数宣言を行うこともできます。これは、var a = function () {}; と同等です。

実行シーケンスを理解する

コードは基本的に次のように機能します:

• a はグローバル スコープで値 1 で定義されています。
• 関数 b が宣言されており、 hoisted.
• b 内では、関数 a() {} (var a = function () {}; と同等) を使用して、変数 a がローカル スコープで宣言されています。これにより、a の別のインスタンスが作成されます。
• a はローカル スコープ内で値 10 で上書きされます。
• b が返され、a のローカル インスタンスはスコープ外になります。
• alert(a) は、値 1 を保持しているグローバル変数 a にアクセスします。

したがって、グローバル変数 a は関数内でローカル変数 a に加えられた変更の影響を受けないため、アラートには「10」ではなく「1」が表示されます。

以上がこの JavaScript コードが「10」ではなく「1」を警告するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。