バックグラウンドで JavaScript がどのように機能するか?

さらに深くジャンプして、ブラウザ エンジン内での JavaScript の実行を理解しましょう。

ご存知のように、JavaScript は高レベルのプロトタイプ ベースのオブジェクト指向、インタープリター、またはジャスト イン タイム コンパイルのシングル スレッド プログラミング言語であり、ファーストクラスの関数とノンブロッキング イベント ループ同時実行モデルを備えています。

この記事は、JavaScript とそれが実際にどのように機能するかをより深く掘り下げることを目的としています。

概要

このブログ投稿は初心者向けであり、経験豊富な JS 開発者にも役立ちます。
これらすべての概念を詳細に説明し、JavaScript が実際にどのように実行されるかを説明します。

この投稿では、実行コンテキスト (メモリ作成フェーズとコード実行フェーズ)、CallStack 実行と JavaScript エンジン、およびそのランタイム環境について説明します。また、イベント ループとスタック フローの概念を理解します。

これは、スクリプトの実行に関係するすべてのコア コンポーネントの概要を説明するものです。
ここでは、次のコンポーネントについて説明します。

1. JavaScript エンジン。
2. JavaScript ランタイム環境。
3. 実行コンテキスト。
4. コール スタック実行とスタック フロー。
5. イベントループ。

前に聞いたかもしれませんが、JavaScript はインタープリター型プログラミング言語です。これは、ソース コードが実行前にバイナリ コードにコンパイルされないことを意味します。
これは、1 行ずつ実行されることを意味しますが、100% 真実ではありません。
JS はジャスト イン タイム (JIT) でコンパイルされた言語です。この最新の動作により、Web アプリケーションで高速になります。それ以外の場合は、解釈された型に従って、アプリケーションのレンダリングが遅くなります。そのため、JS はジャストインタイム (JIT) コンパイル言語であると考えています。

JavaScript エンジンは、JavaScript コードを実行する単なるコンピューター プログラムです。JavaScript エンジンは、今日のすべての最新ブラウザーに組み込まれています。

のように: (エンジンはほとんどありません)
# V8 は Chrome 用の JavaScript エンジンです。
# Mozilla Firefox 用スパイダーモンキー。
＃Microsoft Edgeのチャクラ。
# Safari などの JavaScript コア。

私たちが知っているように、Chromeブラウザー エンジン「V8」は JavaScript で非常に人気があり、2
つの主要なコンポーネントで構成されてい
ます。保存されます。

JavaScript ランタイム環境 (JRE) :

JS エンジンについて説明しましたが、JS エンジンは他のコンポーネントと一緒に JRE 内で実行されます。いくつかの非同期リクエストと呼び出しのように。
コンポーネントは次のようにリストされています。

1. JSエンジン
2. Web API
3. コールバック キューまたはメッセージ キュー
4. イベントループ

JS コードが実行されると、グローバル実行コンテキスト (GEC)が作成されます。
この実行は 2 つのフェーズで作成されます:
1: メモリ作成フェーズ &
2: コード実行フェーズ。

例を見てみましょう。

上記のコード スニペットでは、
最初にGEC が作成され、メモリ フェーズが作成され、すべての変数に未定義の値が割り当てられ、関数ブロック {}全体が fnxn 値としてメモリ空間に配置されます。

次に、第 2 フェーズ、つまりコード実行フェーズでは、コード全体を 1 行ずつ調べ始めます。
そして var a = 3 だったので、undefinedだった変数に3 を代入し、次の行に移動して undefined だった b 変数に 4 を代入します。関数 add() の次の行に移動します。実行するものは何もないため、同じままで、var c の次の行に移動します。

この行で、新しい実行コンテキストが作成され、関数 add(3,4) のローカル実行コンテキストとして名前が付けられ、ここで再び 2 フェーズが作成されます
。メモリ作成フェーズでは、変数 num1、num2、および結果にundefinedが割り当てられます。次に、コード実行フェーズで、add() の関数ブロック { } で 1 行ずつ開始します。
num1 に 3 を割り当て、num2 に 4 を割り当て、
次に var result = num1+num2 に割り当て、結果変数のように 7 を割り当てていることがわかりました。
その後、結果が返され、実行の制御は 9 行目の
var c = 7 に戻ります。

returnキーワードに遭遇すると、呼び出された行に制御を戻し、関数の実行コンテキストも削除します。
次の行、行 10 に移動します。これは c の値を出力します。

これが、実行コンテキストが舞台裏で実際に機能する方法です。

Javascript は、コール スタックの助けを借りてコード実行コンテキストの作成と削除を管理します(コール スタックについては後で説明します )

コール スタック:

コール スタックは、実行コンテキストの実行順序を維持します。プログラム スタック、コントロール スタック、ランタイム スタック、マシン スタック、実行コンテキスト スタックとも呼ばれます。
また、JS はシングル スレッド プログラミング言語であり、スタックが 1 つあり、一度に 1 行ずつ実行されることを意味します。

上記のコード参照を取得し、同じコード スニペットに対してコール スタックがどのように機能するかを説明します。

ここで、GEC が作成されてスタックに落ち、次のローカル実行コンテキストがスタックにポップインされ、実行後にポップアウトして GEC に戻ります。
次に、console.log(c) がポップインされ、実行後にポップアウトされ、GEC にピンターで戻され
ます。その実行が完了すると、GEC もスタックからポップアウトされ、IDLE 状態としてスタックが空になります。

イベントループ:

JavaScript 言語も、同期と非同期の 2 つの方法で見ることができます。

同期 JS では、コードは 1 行ずつ実行されます。つまり、
順次実行されます。非同期 JS では、何も順次実行されません。つまり、コードの行は無視され、主に Web API として知られる動作に従って後で実行されます。

そのため、イベント ループを使用して非同期部分をコール バック キューで処理し、スタックが空になるのを待ってから実行のためにスタックに送信します。

イベント ループは、メイン スタックが空かどうかを継続的にチェックする JS の機能です。空の場合は、Callback Queue をチェックします。実行するコードがキューにある場合、それらは 1 つずつコール スタックに転送されます。コードが実行されると、スタックを離れ、キューが空になるまで、キュー内の次のコードが表示されます。

みんな、物事をまとめて、今後の投稿であなたを捕まえましょう…………。