英語版：https://www.javascripttutorial.net/javascript-call-stack/

JavaScriptコールスタックの概要

JavaScriptエンジンは、コールスタック（英語のコールスタック）を使用して、グローバル実行コンテキストおよび関数実行コンテキストである実行コンテキストを管理します。

実行のコンテキストを理解するには、次のチュートリアルを参照してください。

JavaScript実行コンテキスト

コールスタックは、LIFO（last-in-first-out）の原則に基づいて機能します。つまり、「最後に入るのが最初に出る」ということです。

スクリプトを実行すると、JavaScriptエンジンはグローバル実行コンテキストを作成し、それを呼び出しスタックの最上位に配置します。

関数が呼び出されるたびに、JavaScriptエンジンはその関数の関数実行コンテキストを作成し、それを呼び出しスタックの最上位に配置して、関数の実行を開始します。

関数が別の関数を呼び出すと、JavaScriptエンジンはその新しい関数の新しい関数実行コンテキストを作成し、それを呼び出しスタックの一番上に配置します。

現在の関数が完了すると、JavaScriptエンジンはそれを呼び出しスタックから削除し、最後のコードリストで中断したところから実行を返します。

コールスタックが空になると、スクリプトは停止します。

JavaScript呼び出しスタックの例

次のスクリプトを参照してください。

スクリプトが実行されると、JavaScriptエンジンはグローバル実行コンテキスト（main()またはと呼ばれるglobal()）を呼び出しスタックに配置します。

グローバル実行コンテキストは作成フェーズに入り、実行フェーズに移動します。

JavaScriptエンジンは関数呼び出しを実行し、関数average(10, 20)の関数実行コンテキストを作成してaverage()、呼び出しスタックの一番上に配置します。

JavaScriptエンジンaverage()は、呼び出しスタックの最上位にあるため、実行を開始します。

関数average()は関数を呼び出しますadd(a, b)。その時点で、JavaScriptエンジンは、関数の別の関数実行コンテキストを作成add()し、それを呼び出しスタックの最上位に配置します。

JavaScriptエンジンは、次の機能add()とコールスタックストリップを実行します。

その時点で、関数average()は呼び出しスタックの最上位にあり、JavaScriptエンジンがそれを実行し、呼び出しスタックのストリップを実行します。

コールスタックが空になったため、スクリプトの実行が停止します。

次の画像は、すべての段階でのコールスタックの全体的なステータスを示しています。

スタックオーバーフロー：スタックオーバーフロー

コールスタックのサイズは、ブラウザまたはNode.jsのいずれかでのホスト環境の実装に応じて、固定されています。

実行コンテキストの数がスタックサイズを超えると、スタックオーバーフローが発生します。

たとえば、終了条件のない再帰関数を実行すると、スタックオーバーフローエラーが発生します。

非同期JavaScript

JavaScriptはシングルスレッドのプログラミング言語です。JavaScriptエンジンには呼び出しスタックが1つしかないため、一度に実行できるのは1つだけです。

スクリプトを実行すると、JavaScriptエンジンはコードを上から下に1行ずつ実行します。言い換えれば、JavaScriptは同期的です。

非同期は同期の反対です。つまり、物事は同時に起こります。では、JavaScriptは、コールバック、プロミス、非同期/待機などの非同期タスクをどのようにロードするのでしょうか。ここでイベントループが機能します。これについては、次のチュートリアルで説明します。

JavaScriptイベントループ

このチュートリアルでは、実行コンテキストまたは関数呼び出しを制御するのに役立つJavaScript呼び出しスタックについて学習しました。

すべてのJavaScriptチュートリアルのインデックスを参照してください

以下のリンクをクリックして、私が書いた他の一連のJavaScriptチュートリアルを確認してください。

JavaScriptチュートリアル