JavaScriptの深いひざ

JavaScriptは風変わりな古いものです.それは他の言語のような意見を分割します、しかし、それはインターネット、したがって我々の命の不可欠な部分です.当初、それを嫌って、人間的に可能である限り、それを学ぶことを延期したならば、私は現在dotingなファンです.それは傷跡としわの強力な美しさになっている.
この記事は1つの高レベル領域を見ます.

JavaScriptでコードを実行すると、何が起きているのでしょうか?

コードから始めましょう

function logger(message) {
    console.log(message)
}

logger("Hello")

我々は、これがコンソールに『Hello』を印刷するということを知っています、しかし、何が舞台裏で起こりますか?そのためには、JavaScriptランタイムを理解する必要があります.

実行コンテキストから始めましょう.グローバル実行コンテキストは、JavaScriptがパースし、コードを格納して実行する環境の名前です.2つの部分があります.

実行のスレッド-これは、JavaScriptが行単位でコード行を解析する場所です.

グローバル変数環境(またはグローバルメモリ)-これはJavaScriptが格納するすべての変数と関数を格納する場所です

JavaScriptの実行スレッドは、コードを解析しているので、2つのうちの1つを行います.

メモリ内のコードを格納します-ラベルとコードの格納された部分に帰結します(注意:コードを保存するとき、JavaScriptはそれを読むことができません.

コードを実行します-これは、JavaScriptが関数を呼び出すなどのアクションを実行する場所です.このため、新しいローカル実行コンテキストが呼び出しスタックに追加され、実行のスレッドがローカルコンテキストに入ります

これによりJavaScriptに関する2点が注目されます.

Javascript is single threaded and synchronous

シングルスレッド:JavaScriptは、複数の異なるルートを同時にではなく、コードを介して1つの単一のルートに従います.
同期:JavaScriptは、それが示される順序でコードを処理します.現在の行のコードを処理している間、他のすべてのコードが終了するまで待つ必要があります
このコードスニペットの文脈を見てみましょう.

実行スレッドは、行単位でコード行を通過します.最初の行はロガーの関数定義です.内部にある読み込みを行わないで、JavaScriptは変数名の下でその定義をメモリに追加しますlogger . その後、実行のスレッドは次の行5行目に移動します.ここでJavaScriptは変数名を見ますlogger グローバルメモリをチェックし、同じ名前で保存された変数があるかどうかを確認します.したがって、JavaScriptはそのコードを実行します"Hello" .
実行のスレッドが関数を呼び出すと、JavaScriptはローカル実行コンテキストと呼ばれるものを作成します.ローカル実行コンテキストまたは関数レベル実行コンテキストは、ミニグローバル実行コンテキストのようです.実行のスレッドはこのローカルコンテキストを通過し、ローカルメモリ(ローカル変数環境)にデータを格納できます.注意:ローカルコンテキストはグローバルメモリにアクセスできますが、グローバルメモリはローカルメモリにアクセスできません.これはスコープと呼ばれます.プログラムが複雑になるにつれて、多くの実行コンテキストが入れ子になってしまう可能性があります.それぞれの実行コンテキストが自分のメモリとそれの先祖の記憶にアクセスできることを覚えておくことが重要です.変数を探すとき、それが自身の実行コンテキストで見つからない場合、JavaScriptは変数を見つけたりエラーをスローするまで、次の実行コンテキストを検索します.
呼び出しスタックは、実行中のスレッドがどのコンテキストを追跡します.新しいローカル実行コンテキスト(呼び出しまたはフレームとして知られている)がスタックにプッシュされ、完了すると、スタックからポップされ、実行のスレッドがグローバルコンテキストに戻ります.呼び出しスタックはlifoです:最後のin、最初のアウトのプレートのスタックのように-最後の1つは常にオフに最初のです.
JavaScriptが同期している場合、コードの複数のブロックを同時に実行することはできません.これを管理するために、JavaScriptは2つのキューを持ち、非同期コールバックは実行スレッドが準備できるまで待機します.

コールバックキュー(またはタスクキュー)

マイクロタスクキュー

コールバックキューとマイクロタスクキューはFIFOである.コールバックが最初に実行されるように、microtask待ち行列はコールバック・キューより高い優先順位を有する.コールバックキューからのコールバックは、マイクロタスクキューが空の場合にのみスタックにプッシュされます.これは、マイクロタスクキュー内の多過ぎるコールバックがコールバックキューを起動し、そのタスクが呼び出しスタックに到達するのを防ぐことができます.
イベントループはどのコールバックがスタックにプッシュされているかを決定する責任があります.2つの基準を使用します.

グローバルコンテキストのすべてのコードが実行されましたか?

呼び出しスタックは空ですか?

これらの条件が満たされるならば、それはスタックにコールバックをプッシュします.
どのタスクがどのキューになるのですか?それぞれのJavaScriptランタイムに基づいているニュアンスがあるので、広いブラシをとって、我々がブラウザにいると仮定してください.
コールバックキューに追加する主な方法があります.

HTMLからスクリプトを読み込む

イベント火災

使用setTimout() or setInterval()

MicroTaskキューには、次の2つのオプションがあります.

約束を解決する、または拒絶する

用途window.queueMicrotask() (ライブラリ/フレームワークを作成しない限り、一般的にこれを使用しないでしょう)

それはJavaScriptランタイムの旋風でした.この基礎的な精神モデルでは、我々は移動と非同期JavaScriptについて学ぶために移動することができます.パート2.