ホームページ  >  記事  >  ウェブフロントエンド  >  関数式で「setTimeout」を使用すると JavaScript コードが失敗するのはなぜですか?

関数式で「setTimeout」を使用すると JavaScript コードが失敗するのはなぜですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-24 18:50:41890ブラウズ

Why Does My JavaScript Code Fail When Using `setTimeout` With Function Expressions?

JavaScript 関数の宣言と評価の順序

最初の例が失敗するのはなぜですか?

JavaScript では、コードの実行にはコンパイルと評価の 2 つのフェーズが含まれます。最初の例は、これらのフェーズに関する関数宣言と式の間に根本的な誤解があるために失敗します。

関数宣言と式

関数宣言 では、 function キーワードを使用し、構文:

function name (arguments) {code}

関数式は、一方、式コンテキストで記述され、括弧で囲まれていることを除いて、宣言と同じ構文に従います。式はコンパイルではなく実行中に処理されます。

ケース分析

例 1:

(function() {
setTimeout(someFunction1, 10);
var someFunction1 = function() { alert('here1'); };
})();

コンパイル: SomeFunction1は未定義として定義されています。

実行: setTimeout は someFunction1 の未定義の値で呼び出されます。

例 2:

(function() {
setTimeout(someFunction2, 10);
function someFunction2() { alert('here2'); }
})();

コンパイル: SomeFunction2 は関数として宣言されています。

実行: コンパイルされた someFunction2 関数で setTimeout が呼び出されます。

例 3:

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

コンパイル: SomeFunction3 は最初は未定義として定義されています。

実行: 匿名関数が渡されますsetTimeout に設定し、someFunction3 へのクロージャーを作成します。その後、someFunction3 に関数が割り当てられ、その未定義の値がオーバーライドされます。

例 4:

(function() {
setTimeout(function() { someFunction4(); }, 10);
function someFunction4() { alert('here4'); }
})();

例 2 と同様に、someFunction4 は に渡される前に宣言されます。 setTimeout.

概要

最初の例は、コンパイル中に setTimeout に渡される前に someFunction1 が宣言されていないため、失敗します。関数式は、宣言が処理された後、実行中に評価される必要があります。したがって、関数式を使用する場合、特に setTimeout のような非同期関数に渡す場合、式の順序が重要です。

以上が関数式で「setTimeout」を使用すると JavaScript コードが失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。