ホームページ > ウェブフロントエンド > jsチュートリアル > `setTimeout` は、変数が宣言される前に変数に割り当てられた関数式では実行に失敗するのに、関数宣言では成功するのはなぜですか?

`setTimeout` は、変数が宣言される前に変数に割り当てられた関数式では実行に失敗するのに、関数宣言では成功するのはなぜですか?

DDD
リリース: 2024-10-25 01:56:02
オリジナル
605 人が閲覧しました

Why does `setTimeout` fail to execute with a function expression assigned to a variable before it's declared, but succeeds with function declarations?

JavaScript 関数の宣言と評価順序

問題:

次の JavaScript の例はなぜ実行に失敗しますか?

<code class="javascript">(function() {
  setTimeout(someFunction1, 10);
  var someFunction1 = function() { alert('here1'); };
})();</code>
ログイン後にコピー

他の同様の例は意図したとおりに動作しますが:

<code class="javascript">(function() {
  setTimeout(someFunction2, 10);
  function someFunction2() { alert('here2'); }
})();

(function() {
  setTimeout(function() { someFunction3(); }, 10);
  var someFunction3 = function() { alert('here3'); };
})();

(function() {
  setTimeout(function() { someFunction4(); }, 10);
  function someFunction4() { alert('here4'); }
})();</code>
ログイン後にコピー

解決策:

問題は関数宣言と関数間の評価順序にあります。関数式。

関数宣言と式

  • 宣言: function キーワードを使用して関数を宣言します (例: function someFunction( ){})。関数宣言は、コンパイル フェーズで処理されます。
  • 式: 関数として評価される式を使用して関数を作成します (例: () => {} )。関数式は、実行 フェーズで処理されます。

評価順序

JavaScript コードは、

  1. コンパイル: 変数が作成され、関数宣言が処理されます。
  2. 実行: 関数式とその他のコードが実行されます。

例の分析

  • 例 1:

      関数 someFunction1 は 実行フェーズ中の関数式
    • setTimeout 関数は、someFunction1 が完全に評価され、変数 someFunction1 に割り当てられる前に呼び出されます。
    • setTimeout 関数は、someFunction1 の未定義の値を受け取り、実行に失敗します。
  • 例 2、3、および 4:

    これらの各例では、関数function キーワードを使用して宣言され、
      関数宣言
    • になります。関数宣言はコンパイル段階で処理されるため、setTimeout 関数が呼び出される前に存在します。
    • setTimeout 関数は有効な関数参照を受け取り、正常に実行されます。
追加の説明

JavaScript の関数引数は常に値によって渡されます。つまり、setTimeout 関数は変数 someFunction1 を直接参照するのではなく、変数が参照する関数のコピーを参照します。

以上が`setTimeout` は、変数が宣言される前に変数に割り当てられた関数式では実行に失敗するのに、関数宣言では成功するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート