JavaScriptのコンパイルプロセス

Javascript は Web 開発に必須のスキルとなっており、ブラウザーだけでなく、Node.js、モバイル端末、デスクトップ端末、組み込み機器など、さまざまなアプリケーションシーンで広く使用されています。 Javascript の実行中には、コンパイル プロセスという非常に重要な概念があります。この記事ではJavaScriptの実行プロセスをコンパイルプロセスの観点から紹介します。

コンパイルプロセスとは何ですか?

コンパイル プロセスは、ソース コードを実行可能コードに変換するプロセスです。 Javascript では、コンパイル プロセスは、解析フェーズと実行フェーズの 2 つのフェーズに分割できます。

解析ステージ

解析ステージは、字句解析と構文解析の 2 つの部分に分かれています。

字句解析

字句解析のタスクは、ソース コードを言語の最小単位である字句単位 (トークン) に分解することです。字句単位には、キーワード (関数、変数など)、識別子 (変数名、関数名など)、演算子 (-、*、/ など) が含まれます。

たとえば、次は単純な関数宣言です:

function add(x, y) {
  return x + y;
}

この関数宣言は次の字句単位に分割されます:

Keyword 'function'
Identifier 'add'
Punctuator '('
Identifier 'x'
Punctuator ','
Identifier 'y'
Punctuator ')'
Punctuator '{'
Keyword 'return'
Identifier 'x'
Punctuator '+'
Identifier 'y'
Punctuator ';'
Punctuator '}'

文法分析

構文解析のタスクは、字句単位を抽象構文ツリー (AST) に変換することです。抽象構文ツリーとは、コードの構文構造をツリー構造で表現したデータ構造です。各ノードは文法構造内の構成要素を表し、子ノードはその構成要素のサブ構成要素を表します。

たとえば、上記の関数宣言の場合、生成される抽象構文ツリーは次のとおりです。

{
  "type": "FunctionDeclaration",
  "id": {
    "type": "Identifier",
    "name": "add"
  },
  "params": [
    {
      "type": "Identifier",
      "name": "x"
    },
    {
      "type": "Identifier",
      "name": "y"
    }
  ],
  "body": {
    "type": "BlockStatement",
    "body": [
      {
        "type": "ReturnStatement",
        "argument": {
          "type": "BinaryExpression",
          "operator": "+",
          "left": {
            "type": "Identifier",
            "name": "x"
          },
          "right": {
            "type": "Identifier",
            "name": "y"
          }
        }
      }
    ]
  }
}

実行フェーズ

解析フェーズが完了すると、JavaScript プログラムは次のようになります。実行フェーズ。実行フェーズのタスクは、抽象構文ツリーを実行することです。

抽象構文ツリーを実行するプロセスは、プリコンパイルと実行の 2 つの段階に分けることができます。

プリコンパイル

プリコンパイルのタスクは、変数と関数の宣言を処理することです。実行フェーズが始まる前に、JavaScript エンジンはプログラムの抽象構文ツリーをスキャンし、現在のスコープ内に対応する変数と関数を作成します。このプロセスはスコープ前処理と呼ばれます。

まず、すべての関数宣言を進めます。このプロセスは関数宣言ホイスティングと呼ばれます。関数宣言ホイスティングの本質は、関数名と関数本体を現在のスコープの先頭に引き上げることで、関数が宣言される前に関数を呼び出すことができます。

たとえば、次のコード:

add(1, 2);

function add(x, y) {
  return x + y;
}

は、次のコードと同等です:

function add(x, y) {
  return x + y;
}

add(1, 2);

次に、すべての変数を事前に宣言します。このプロセスは変数ホイスティングと呼ばれます。変数のプロモーションでは、変数の宣言のみがプロモートされ、変数の代入ステートメントはプロモートされないことに注意してください。

たとえば、次のコード:

console.log(a);
var a = 1;

は次と同等です:

var a;
console.log(a);
a = 1;

Execution

実行プロセスはステートメントの順序で実行されます。現れる。実行中に、変数が割り当てられ、関数が呼び出され、コード ブロックまたは関数によってスコープが設定される場合があります。

概要

JavaScript のコンパイル プロセスには、解析フェーズと実行フェーズが含まれます。解析フェーズには字句解析と構文解析が含まれ、実行フェーズにはプリコンパイルと実行が含まれます。実行フェーズの前に、JavaScript エンジンはスコープを前処理し、関数宣言のホイスティングと変数のホイスティングを実行してから、ステートメントが出現する順序でコードを実行します。

以上がJavaScriptのコンパイルプロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。