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 出力リダイレクトが有効にならない問題の解決方法

推薦する

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

Docker での RocketMQ の詳細なインストールと使用

RocketMQ イメージを検索するには、Docker の hub.docker.com で検索する...

MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...

MySQL データベースで機密データの暗号化と復号化を実装する方法

目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....

読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解文法:オブジェクト.defineProperty(o...

ApacheBench でマルチ URL をサポートする方法

標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...

Docker のポート解放失敗の解決策

今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...