JavaScript の仕組み: 実行コンテキストを理解する (初心者向けに簡略化)

JavaScript は、世界で最も人気のあるプログラミング言語の 1 つです。しかし、内部ではどのように機能するのでしょうか?初心者でも理解できるように、簡単な概念と疑似コードを使用して、段階的に説明していきます。

JavaScript とは何ですか?

JavaScript は、ブラウザ (Chrome、Firefox、Safari など) またはサーバー (Node.js などのツールを使用) で実行されるプログラミング言語です。ウェブサイトをインタラクティブにするために使用されます。ブラウザーでアニメーション、クールな動作をするボタン、またはゲームを見るときは、JavaScript が魔法を行っています。

JavaScript がどのように動作するかを理解するには、次の 2 つのことを理解する必要があります。

1. 実行コンテキスト
2. コールスタック

実行コンテキストとは何ですか?

実行コンテキストは、JavaScript がコードを実行するために必要なものをすべて保持するボックスのようなものです。これには以下が含まれます:

1. 変数 (x = 5 など、保存するデータ)
2. 関数 (showMessage() など、何かを実行するコード部分)
3. 実行するコード (実際に作成する命令)

実行コンテキストには主に 2 つのタイプがあります:

1. グローバル実行コンテキスト (GEC): これは、JavaScript がコードの実行を開始するデフォルトのボックスです。メインステージのようです
2. 関数実行コンテキスト (FEC): これは、関数が呼び出されるたびに作成される新しいボックスです。その機能に対してのみ機能します。

段階的な例

次の単純な疑似コードを作成したと想像してください:

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

JavaScript の動作を段階的に説明します:

1.グローバル実行コンテキストを作成します

プログラムが開始されると、JavaScript は グローバル実行コンテキスト (GEC) を自動的に作成します。

• メモリ (可変環境):

  • name = 未定義 (現時点ではプレースホルダー)
  • welcome = 関数定義 (greet() のコードを格納)

• コード実行フェーズ:

  • グローバル コードを行ごとに実行します。
  • 変数名 = "アレックス"; → メモリを更新: name = "Alex"
  • 出会いgreet(); → 挨拶関数を呼び出します。

2.関数実行コンテキストを作成します

greet() が呼び出されると、JavaScript は、greet 専用の新しい 関数実行コンテキスト (FEC) を作成します。

• メモリ (可変環境):

  • message = 未定義 (greet 内の変数のプレースホルダー)

• コード実行フェーズ:

  • 挨拶機能を実行します:
  • var message = "こんにちは、" name; → "Hello, " と名前 ("Alex") を組み合わせるため、message = "Hello, Alex" となります。
  • 返信メッセージ; → 「こんにちは、アレックス」を送り返します。

3.掃除して返却

greet 関数が終了すると、その 関数実行コンテキスト は削除 (削除) されます。プログラムはグローバル実行コンテキストに戻ります。

実行コンテキストはどうなりますか?

JavaScript は、コール スタックを使用して、これらすべての実行コンテキストを追跡します。

コールスタックとは何ですか?

呼び出しスタックは、皿を重ねたようなものです:

1. グローバル実行コンテキストは一番下 (最初のプレート) にあります。
2. 関数が呼び出されるたびに、関数実行コンテキストが上部 (新しいプレート) に追加されます。
3. 関数が終了すると、そのコンテキストは削除されます (プレートが取り外されます)。

擬似コードによる視覚化

JavaScript がコードを処理する方法は次のとおりです:

1. 初期グローバル コード (GEC の作成):
   

   // Global Code
   var name = "Alex";
   function greet() {
       var message = "Hello, " + name;
       return message;
   }
   greet();
   

   ログイン後にコピー

   ログイン後にコピー

2. グローバル実行更新 (コードの実行):
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

   ログイン後にコピー

3. greet() の呼び出し (FEC の作成):
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

   ログイン後にコピー

4. greet() を実行して戻ります:
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

   ログイン後にコピー

5. 実行の終了:
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

   ログイン後にコピー

覚えておくべき重要なこと

1. 実行コンテキストは、JavaScript がコードを実行するコンテナ のようなものです。すべてのプログラムは グローバル実行コンテキスト で始まり、各関数は独自の 関数実行コンテキスト を取得します。
2. 呼び出しスタックは、実行中の内容を追跡します。最後に追加されたものは最初に削除されたものになります (LIFO: 後入れ先出し)。
3. JavaScript は関数が完了するとクリーンアップします。関数の記憶が永久に残るわけではないのはこのためです。

なぜこれが重要なのでしょうか?

実行コンテキストを理解すると、より良いプログラムを作成するのに役立ちます:

• 変数が一部の場所では利用可能で、他の場所では利用できない理由 (スコープ) がわかります。
• 「未定義」変数などのエラーを理解できるようになります。
• 関数がどのように相互作用するのか、また関数が値を返す理由がわかります。

自分に挑戦してください

頭の中でこの疑似コードを実行してみてください:

Call Stack:
  Empty (Program Ends)

自分自身に問いかけてください:

1. グローバル実行コンテキストには何がありますか?
2. multiply() が呼び出されると何が起こりますか?
3. 結果の最終的な値は何ですか?

実行コンテキストをマスターすることで、JavaScript の最も難しい問題にも取り組むための強固な基盤が得られます!

以上がJavaScript の仕組み: 実行コンテキストを理解する (初心者向けに簡略化)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。