技術面接の質問 - イベント ループの一部

導入

皆さん、こんにちは！

今日はタイトルにもあるように、イベントループについてお話します。

これは、面接官が直接尋ねることが多いトピックではありません (イベント ループの説明を求められたのは 2 回だけ覚えています)。しかし、ほとんどの面接では、それに関連した質問をされます。例:

• 「これを行う場合…どのような動作をとるべきですか?」
• 「コードが次のようになった場合、出力はどうなりますか?」
• 「なぜこのコードはこの出力を生成するのですか?」

イベント ループがどのように機能するかを理解していれば、これらすべての質問に答えるのがはるかに簡単になります。

正直に言うと、このトピックは私の好みではありません。イベント ループがどのように動作するかを 10 分間続けて説明するよりも、コードの動作に関する質問の方が好きです。?

さあ、飛び込みましょう！ ?

## 質問
1. イベントループとは何ですか?
2. 例

---

イベントループとは何ですか?

短い答え:

イベント ループは、JavaScript ランタイムでの非同期タスクの処理を担当します。

正直に言うと、この答えはイベント ループについて尋ねるインタビュアーの好奇心を満たすのに十分ではないと思います。そこで今回の記事では、このテーマについてさらに深く掘り下げていきたいと思います。

単に概念を知るだけでなく、それがどのように機能するかを理解することが重要です。そのため、最後にいくつかの例を追加しました。

理論

イベントループとは何ですか?

JavaScript にはイベント ループに基づくランタイムがあり、タスクの処理を担当します。各言語には独自のランタイムがあり、JavaScript はシングルスレッドであることに注意する必要があります。

シングルスレッドとはどういう意味ですか?

シングルスレッドとは、JavaScript が一度に 1 つのタスクのみを処理できることを意味します。これが、JavaScript においてイベント ループが非常に重要である理由です。このシングルスレッドの制限にもかかわらず、タスクを効率的に管理するのに役立ちます。

ランタイムのコンポーネント

イベント ループをより深く理解するために、まずその主要コンポーネントを見てみましょう:

コールスタック

コールスタックは、呼び出す関数を追跡するデータ構造です。これはプレートのスタックのように考えることができます。関数が呼び出されるとスタックに追加され、関数が終了するとスタックから削除されます。

コール スタックは LIFO (後入れ先出し) 原則に基づいて動作します。つまり、JavaScript はスタックされた順序 (最上位の項目から下に 1 つずつ) で関数を実行します。 (JavaScript はシングルスレッドであることを思い出してください)。

キュー

JavaScript のランタイムには、処理されるタスクのリストを保持するキューがあります。これらのキュー内のタスクは、コール スタックが空になるまで待機します。

• タスク キュー (またはコールバック キュー): このキューには、setTimeout() 呼び出しや setInterval() 呼び出しなどのタスクが保存されます。ここでのタスクは、コール スタックが空になり、マイクロタスク キュー内のすべてのタスクが処理された後に処理されます。 MDN のこのキューに保存されているタスクの例をさらにご覧ください。

• マイクロタスク キュー: このキューはタスク キューよりも優先されます。これには、Promise コールバックなどのマイクロタスクや、process.nextTick() や async 関数などの非同期関数が含まれます。

タスク キューは、FIFO (先入れ先出し) ベースで動作します。つまり、タスクは追加された順序で処理されますが、それはマイクロタスクの後にのみ処理されます。キューは空です。

イベントループ

イベント ループは、非同期コードの実行を管理するメカニズムです。コール スタックを監視し、コール スタックとキュー (タスク キューとマイクロタスク キュー) の間を調整して、コードのスムーズな実行を維持します。

仕組みは?

イベント ループのプロセスを段階的に見てみましょう。視覚的に表現するには、下の画像を参照してください。

この例では:

• 呼び出しスタックには 1 つの関数があります。
• マイクロタスク キューには 2 つのメッセージがあります。
• タスクキューにはメッセージが 1 つあります。

ステップ 1: 呼び出しスタックを処理する

1. イベント ループは、呼び出しスタックを確認することで開始されます。
2. スタック内で関数を見つけて実行を開始します。
3. この関数が完了すると、呼び出しスタックから削除されます。

ステップ 2: マイクロタスク キューを処理する

1. コールスタックが空になった後、イベントループはマイクロタスクキューをチェックします。
2. マイクロタスク キューから最初のメッセージを取得し、実行のためにそれをコール スタックにプッシュします。

1. 関数が実行され、完了すると、呼び出しスタックから削除されます。
2. その後、イベント ループは マイクロタスク キュー 内の次のメッセージに移動し、プロセスを繰り返します。
3. これは、マイクロタスク キュー にメッセージがなくなるまで続きます。

ステップ 3: タスクキューを処理する

1. コールスタックとマイクロタスクキューの両方が空になると、イベントループはタスクキューに変わります。
2. タスクキュー内の最初のメッセージを選択し、それをコールスタックに追加します。
3. 関数が実行され、完了すると、呼び出しスタックから削除されます。
4. イベント ループは、タスク キュー 内の各タスクでこのプロセスを継続し、すべてのタスクが 1 つずつ処理されるようにします。

この順序 (コール スタック、次に マイクロタスク キュー、最後に タスク キュー) に従うことで、イベント ループは JavaScript が非同期コードを効率的に処理できるようにします。シングルスレッド環境

---

例

イベント ループの仕組みとタスクの優先順位付け方法を理解したところで、いくつかの例を見てみましょう。

例1

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

続行する前に、出力の順序について考えてみてください。

✨それは何だと思いますか?✨

この出力が得られる理由を理解するために、コードの各部分を分析してみましょう。

1.プロミスの作成

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• ここでは、コールバック関数を使用して新しい Promise を作成します。
• この関数内では、console.log('A') がすぐに実行されるため、"A" がコンソールに出力されます。
• 「A」を記録した後、Promise は値「B」で解決されます。
• JavaScript は、メイン コール スタックがクリアされたら実行する必要がある .then コールバック (つまり、showB) があることを認識するため、showB を マイクロタスク キュー に追加します (Promise の解決がそこに送られるため)。

2. setTimeout 呼び出し

setTimeout(function showC() {
  console.log('C');
}, 0);

• setTimeout 関数は、showC が 0 ミリ秒後に実行されるようにスケジュールします。
• JavaScript は showC をタスク キューに配置します。これはタイマーベースの関数であるためです。

3. a.then コールバック

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

• この行は、前のステップ (resolve('B')) ですでに解決した Promise の .then ハンドラーを登録します。
• Promise が解決されたため、showB (.then コールバック) が マイクロタスク キュー に追加されます。

4. d
の定義

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• この行は関数 showD を定義しているだけですが、まだ実行されていないため、ここでは何も起こりません。

5. d()
の呼び出し

setTimeout(function showC() {
  console.log('C');
}, 0);

• ここで d() を呼び出します。これは 呼び出しスタック に追加されて実行されます。 これにより console.log('D') が生成されるため、"D" がコンソールに出力されます。

最終出力順序:

a.then(function showB(b) {
  console.log(b);
});

参考GIF

インタラクティブな例

例 2

const d = function showD() {
  console.log('D');
};

もう一度、出力の順序について考えてみましょう。

✨それは何だと思いますか?✨

説明して​​いきましょう...

1.ロギング「スタート！」

d();

• この行は 呼び出しスタック に追加され、すぐに実行されます。
• その結果、「Start!」 がコンソールに出力されます。

1. setTimeout 呼び出し

A
D
B
C

• setTimeout 関数は、0 ミリ秒後に実行されるように showTimeout をスケジュールします。
• JavaScript は、showTimeout を タスク キュー に配置します。これはタイマーベースの関数であるためです。

3.約束の解決

console.log("Start!");

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

Promise.resolve("Promise!")
  .then(function showPromise(res) {
    console.log(res);
  });

console.log("End!");

• Promise は値「Promise!」ですぐに解決されます。
• JavaScript は showPromise (.then コールバック) を マイクロタスク キュー に配置します。これは、Promise は解決された後にマイクロタスク キューに入るからです。

4.ロギング「終了！」

console.log("Start!");

• この行は 呼び出しスタック に追加され、すぐに実行されます。
• その結果、「End!」 がコンソールに出力されます。

最終出力順序:

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

参考GIF

インタラクティブな例

終わり

この章はそれほど長くありませんでしたが、これらの例がイベント ループの仕組みを理解するのに役立つことを願っています。

他の例を分析するには、インタラクティブ ページを試してみることを強くお勧めします。このページを試してみると、実際のイベント ループをより簡単に理解できるようになります。

私の以前の投稿にたくさんの愛をいただき、本当にありがとうございます!

また来週お会いしましょう！ ?

バイバイ

以上が技術面接の質問 - イベント ループの一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。