JavaScriptのプリコンパイルを見てみましょう（概要）

JSランニング三部作

js実行コードは3つのステップに分かれています

構文解析
プリコンパイル
解釈

JavaScript コードが実行されると、最初に構文解析を実行してコード内に低レベルのエラーがあるかどうかを確認し、次にプリコンパイルして内部ロジックを整理し、最後にコードを 1 行ずつ実行し始めます。

構文解析

コードを実行する前に、システムはコード全体をスキャンして、中括弧の欠落などの低レベルの構文エラーがないか確認します。

プリコンパイル

コンパイル前の序章

プリコンパイルは関数が実行される直前に行われます。変数は宣言されずに値が割り当てられ、変数はグローバルオブジェクトによって所有されます。

a = 3

var b = c = 4

宣言されたすべてのグローバル変数はウィンドウのプロパティです

var a = 1 ===> window.a = 1

プリコンパイルの4つのステップ

AO (アクティベーションオブジェクト) オブジェクトを作成します (関数内のローカル変数を保存します)
パラメータと変数の宣言を見つけ、変数名とパラメータ名を未定義の値を持つAO属性名として使用します。
実パラメータと仮パラメータを統合する
関数本体内の関数宣言を探し、関数本体に値を割り当てます。

例を挙げて説明しましょう。また、先に進む前に自分で答えを出すこともできます。

関数fn(a) {
 コンソールにログ出力します。
 var a = 123;
 コンソールにログ出力します。
 関数a() {}
 コンソールにログ出力します。
 var b = function() {};
 コンソールログ(b);
 関数 d() {}
 コンソールログ(d)
}
関数(1)

最初のステップは、AO (アクティベーションオブジェクト) オブジェクトを作成することです。 2 番目のステップは、仮パラメータと変数宣言を見つけ、変数名と仮パラメータ名を undefined の値を持つ AO 属性名として使用することです。

{
 a: 未定義、
 b: 未定義、
}

3番目のステップは、実際のパラメータと形式パラメータを統合することです。

{
 a: 1、
 b: 未定義、
}

ステップ4: 関数宣言を見つけて関数本体に値を割り当てる

{
 a: 関数 a() {},
 b: 未定義、
 d: 関数 d() {}
}

したがって関数fnが実行される直前のa、b、dの値は上記のようになります。

したがって、fn(1)を実行した結果は

// ƒa() {}
// 123
// 123
// ƒ() {}
// ƒd() {}

グローバルスコープでは、プリコンパイルのプロセスが若干異なります。

GO (グローバルオブジェクト) オブジェクト (関数内にグローバル変数を格納する) を作成します GO === window
パラメータと変数の宣言を見つけ、変数名とパラメータ名を未定義の値を持つGO属性名として使用します。
関数本体内の関数宣言を探し、関数本体に値を割り当てます。

解釈

コードを1行ずつ実行する

練習問題

ここにいくつかの例がありますので、興味があればご覧ください。

関数テスト(a, b) {
 コンソールにログ出力します。
 コンソールログ(b);
 var b = 234;
 コンソールログ(b);
 a = 123;
 コンソールにログ出力します。
 関数a() {}
 var a;
 234;
 var b = function() {};
 コンソールにログ出力します。
 コンソールログ(b);
}
テスト(1);

グローバル = 100;
関数fn() {
 console.log(グローバル);
 グローバル = 200;
 console.log(グローバル);
 var グローバル = 300;
}
関数fn();
var グローバル;

関数テスト() {
 コンソールログ(b);
 もし（a）{
  var b = 100;
 }
 234;
 コンソールログ(c);
}
var a;
テスト（）;
a = 10;
コンソールログ(c);

要約する

ほとんどの場合、プリコンパイルプロセスを処理するために次の方法を使用します。

関数の宣言、全体的な改善
変数宣言、宣言の昇格

複雑な状況に遭遇した場合、問題を解決するには最も原始的な方法しか使えません。

JavaScript プリコンパイルの理解（まとめ）に関する記事はこれで終わりです。JavaScript プリコンパイルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: