JavaScript 関数のホイスティングとスコープは変数の上書きにどのような影響を与えますか?

JavaScript 関数のスコープとホイスティング: より深いダイブ

JavaScript のスコープとホイストに関する Ben Cherry の記事では、関数ホイスティングと変数スコープの概念が紹介されています。 。その影響をよりよく理解するために、彼が提供する興味深い例を詳しく見てみましょう:

var a = 1;

function b() {
    a = 10;
    return;

    function a() {}
}

b();
alert(a);

このコードを実行すると、「1」を警告することがわかりますが、不可解に思えるかもしれません。

関数ホイスティングは、関数宣言をスコープの先頭に引き上げる重要な概念です。これは、上記のコードが実質的に次のように書き直されることを意味します。

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

奇妙なことに、関数内の関数 a() は変数宣言と同様に機能します (var a = function () {};)。 。次の点を考慮してください:

var a = 1;

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

b();
alert(a);

どちらのバージョンでもまったく同じ結果が得られます。

基本的に、コードは次のことを行います:

var a = 1;                 // Defines "a" in the global scope
function b() {  
   var a = function () {}; // Defines "a" in the local scope 
   a = 10;                 // Overwrites the local variable "a"
   return;      
}       
b();       
alert(a);                 // Alerts the global variable "a"

重要な点は、関数のホイスティングと変数のスコープが相互作用して、この動作が生成されます。内部関数はローカル変数 a を作成し、関数宣言自体は関数を最上位に上げます。これにより、最終的には、グローバルに定義された a が関数内の変更の影響を受けなくなります。

以上がJavaScript 関数のホイスティングとスコープは変数の上書きにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。