フロントエンドの面接を受けたいと聞きましたが？

ゴールド、スリー、シルバー、フォーシーズンズ。近年人気の分野であるフロントエンドは、最近猛烈な勢いで面接を行っており、多くの興味深い面接官や興味深い面接の質問に会いました。これを助けるためにここにいます。言い換えてみましょう。

以下は私の友人からの話で、実際には私ではありません。

for (var i = 0; i < 5; i++) {
  console.log(i);
}

「Xiaowei、これらのコード行が何を出力するのか教えてください。」

面接官がこれらのコード行を Sublime に入力したとき、私は少し混乱しました。ハマグリ？これが最も単純なループではないでしょうか?これは私が見た質問とよく似ていますが、質問者は書き終えていませんでしたか？有毒です。

「0から4をそのまま出力すればいいのに…」と私は力なく言いました。

「はい、緊張しないでください。この質問には罠はありません。ただ気軽に書いています。」

（すみません？面接官、冗談を言いに来たのですか？死ぬほど怖いです！）

「それでは、これらのコード行が何を出力するかを見てください。」

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);}

うーん、何ということですか、なぜ私が何度も覚えた終わりの質問ではないのですか? 考えさせてください。 setTimeout は実行を遅らせるので、console.log が実行されると、実際には 5 になります。 はい、それだけです。これほど単純なことを行うのがどうしてこんなに難しいのでしょうか。

「5 の出力を開始し、その後 1 秒ごとに 5 を出力し、合計 5 つの 5 を出力する必要があります。」

「はい、0 から 4 を出力できるようにするには、どう変更すればよいでしょうか?」私がよく知っているものです。はい、クロージャを追加するだけで解決します。安定しています。

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

「わかりました。この i を削除するとどうなるか教えていただけますか?」

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

「この場合、i への内部参照はなく、出力は実際には 5 になります。」

"とてもわかりました。変更して、出力がどうなるか見てみましょう?」一体、何が起こっているのか、考えさせてください。ここでは、即時実行関数が setTimeout に渡されます。さて、setTimeout は関数または文字列をパラメータとして受け入れることができるので、ここでの即時実行関数とは何でしょうか? これは未定義である必要があります。これは次と同等です:

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

そして、即時実行関数はすぐに実行されるため、すぐに出力される必要があります。

「すぐに 0 から 4 が出力されるはずです。」

「ああ、悪くないです。最後の質問ですが、Promise について知っていますか?」

「大丈夫です...」

「OK、それから試してみてください。」質問「

setTimeout(undefined, ...);

なんてことだ！」 ！ ！ ！静かにしたい！

この質問は私の JavaScript の実行メカニズムを調べる必要があります。私の考えを整理させてください。

最初に setTimeout が発生するため、最初にタイマーが設定され、タイマーが終了した後、関数が渡されてタスクキューに配置されるため、最初に 1 が出力されることはありません。

次に Promise があり、内部の関数は直接実行されるため、 2 3 が直接出力されるはずです。

次に、Promise の then を現在のティックの最後に配置する必要がありますが、まだ現在のティック内にあります。

つまり、最初に 5 が出力され、次に 4 が出力されるはずです。

最後に、次のティックは 1 です。

「2 3 5 4 1」

「わかりました、次の面接を待ちましょう。」

とても簡単です!お母さんはもう私の面接について心配する必要はありません。