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

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

JSランニング三部作

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

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

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

構文解析

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

プリコンパイル

コンパイル前の序章

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

a = 3

var b = c = 4

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

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

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

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

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

関数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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript のプリコンパイルと暗黙のグローバル変数の簡単な分析
  • JavaScript のプリコンパイル プロセスを説明する例
  • JavaScript プリコンパイル原理の詳細な説明
  • JavaScript実行プロセスの「プリコンパイルフェーズ」と「実行フェーズ」
  • JSPをプリコンパイルすることでパフォーマンスのボトルネックを解消

<<:  MySQLでヘッダー付きのCSVファイルをエクスポートする方法

>>:  Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

推薦する

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード

序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...

LED を使って Linux カーネルを使い始める方法を探る

目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

vue+antv でレーダーチャートを実装するためのサンプルコード

1. 依存関係をダウンロードするnpm インストール @antv/データセットnpm インストール ...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

Linux システム (CentOS7 インストール) に JDK8 をインストールするための詳細なチュートリアル

JDKのインストールシステムのインストールについてはあまり詳しく説明しません。インストール手順はオン...

jQuery はパーセンテージスコアリングの進捗バーを実装します

この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...

DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する

Jenkins をインストールした後、プラグインの初期ダウンロードが常に失敗し、インストールが失敗し...

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...

MySQL InnoDB インデックス拡張の詳細な説明

インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...

Vueは透かし効果を簡単に実現します

序文: Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...

JS for ループで setTimeout を使用する 4 つのソリューション

目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3:解決策4: setTimeout...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...