1 つの例から始めて、そのコードが舞台裏でどのように動作しているかを詳しく見てみましょう。

var x = 10;
var y = 20;

function add(a,b){
  return a+b;
}

var result = add(x,y);

console.log(result) //30

まず、x 変数と y 変数を宣言し、それぞれの値 10 と 20 で初期化します。

次に、引数を受け取り、引数の合計 (10 + 20 = 30) を返す add 関数を宣言します。

3 番目に、引数を x および y 変数の値として指定して add 関数を呼び出し、結果を変数 result に格納します。

最後に変数結果をコンソールで出力します。

上記のコードを実行すると、JavaScript はさまざまな処理を実行します。

JavaScript エンジンが JavaScript コードを実行すると、その時点で実行コンテキストが作成されます。

各実行コンテキストには 2 つのフェーズがあります

1. 作成フェーズ。
2. 実行フェーズ。

JavaScript エンジンが初めてコードを実行するとき、グローバル実行コンテキストが作成されます。このフェーズでは、JavaScript がいくつかのタスクを実行します。

1. グローバル オブジェクト、つまり Web ブラウザでウィンドウを作成するか、Node.js でグローバルを作成します。
2. this オブジェクト (this キーワード) を作成し、グローバル オブジェクトにバインドします。Web ブラウザの場合、このキーワードは window オブジェクトに関連付けられ、Node js の場合、このキーワードはグローバル オブジェクトに関連付けられます。
3. 変数と関数の参照を保存するためのメモリ ヒープをセットアップします。
4. 関数宣言をメモリ ヒープに格納し、変数を初期値を未定義としてグローバル実行コンテキストに格納します。

1. 変数 x、y、結果と関数宣言 add() をグローバル実行コンテキストに保存します。
2. 変数を未定義の値、つまり x = unknown 、y = unknown、result = unknown で初期化します。

実行フェーズ

実行フェーズでは、JavaScript エンジンはコードを 1 行ずつ実行し、値を変数に割り当て、関数呼び出しを実行します。

関数呼び出しごとに、JavaScript エンジンは新しい関数実行呼び出しを作成します。

関数実行コンテキストは、グローバル実行コンテキストと似ています。ただし、JavaScript エンジンはグローバル オブジェクトを作成する代わりに、関数のすべてのパラメーターへの参照である引数オブジェクトを作成します。

この例では、JavaScript エンジンは、関数に渡されるすべてのパラメーターを参照する引数オブジェクトを作成し、この値をグローバル オブジェクトに設定します。Web ブラウザの場合、この値は window オブジェクトに関連付けられ、Node js の場合、この値は global に関連付けられます。オブジェクトを作成し、a および b パラメータを未定義の値で初期化します。

関数実行コンテキストの実行フェーズ中に、JavaScript エンジンは 10 と 20 の値をパラメータ a と b に割り当て、結果 (30) をグローバル実行コンテキストに返します。

グローバル実行コンテキストや関数実行コンテキストを含むすべての実行コンテキストを追跡するために、JavaScript エンジンはコール スタックを使用します。

連絡を取り合いましょう

この記事が皆さんにとって有益であることを願っています。また次回でお会いしましょう!