JavaScriptのプリコンパイル原理の分析

今日はスコープやプリコンパイルなどに関する知識を復習するのに多くの時間を費やしました。

たくさんのブログ投稿を読んだり、以前に読んだ本を読んだりしました (多くの本にはプリコンパイルについて書かれていないようです)
見つけましたとてもよく理解していることを学んでいると思っていましたが、実際にはまだ誤解がいくつかあります
(多くのブログ投稿は誤解を招きます)
混乱したアイデアを今夜整理します
まず、事前にまとめられた知識を整理しましょう。将来時間があるときにスコープについて詳しく説明します

---

このプリコンパイルが従来のコンパイルとは異なることを誰もが理解する必要があります (JS プリコンパイルが特別なコンパイル プロセスであることは理解できます)
JavaScript はインタープリタ型言語です。
インタープリター型言語であるため、1 行をコンパイルして 1 行を実行します
従来のコンパイルでは、単語の分割、解析、コード生成など、多くの手順を実行します
時間があるときに、一般的な科学について説明します未来
次に、JS のプリコンパイルについて私が理解していることを共有します

JavaScript の実行三部作

スクリプトの実行 JS エンジン 何をしましたか?

1. 構文分析

2. プリコンパイル

3. 説明と実行

コードを実行する前に2つのステップがあります
構文分析は非常に簡単です。つまり、エンジンはコードに低レベル構文エラー
説明 実行とは、名前が示すように、コードを実行することです
プリコンパイルを簡単に理解すると、変数や関数を保存するためにメモリ内にスペースを空けることです
プリコンパイルを理解することも役に立ちます誰もがスコープを理解できるように

JS のプリコンパイルはいつ行われますか

私の最初の誤解もここで発生しました
プリコンパイルはいつ行われますか?
上記の実行プロセスによって誤解が生じないよう願っています
あなた。プリコンパイルはスクリプト内のコード ブロックが実行される前にのみ行われると誤解されていますが、これは間違いではありません。
実際、プリコンパイルはスクリプト コードの実行前に行われます
。しかし、そのほとんどは
関数が実行される前に行われます。

JS プリコンパイルの例

例を示す前に、まずこれらの概念について考えてみましょう:

• 変数宣言 var...

• 関数宣言 function...

<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log(&#39;so easy&#39;);
    };    var c = function(){//是变量声明而不是函数声明！！
        //...
    }
    b(100);</script><script>
    var d = 0;</script>

エンジンはこのコードを実行します

• ページが生成されるときにGOグローバルオブジェクト(Global Object)が作成されます(つまり、誰もがよく知っているウィンドウオブジェクト)

• 最初のスクリプトファイルがロードされます

• スクリプトの後ロードされ、構文が正当かどうかを分析します

• プリコンパイルを開始します

  
  

• GO属性として変数宣言を検索し、値を割り当てます未定義を割り当てます

• GO属性として関数宣言を検索し、値は関数ボディに割り当てられます

//伪代码GO/window = {    //页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
    a: undefined,
    c: undefined，
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}

• 実行コード（関数Bが実行されるまで）

//伪代码
GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}

-function関数Bを実行する前に、プリコンパイルが発生します。オブジェクト (アクティブ オブジェクト)

• 仮パラメータと変数の宣言を探して、値を未定義に代入します
  

実際のパラメータの値を仮パラメータに代入します
関数宣言を見つけて、値を関数に代入します本文

//伪代码AO = {    //创建AO同时，创建了arguments等等属性，此处省略
    y: 100,
    x: undefined}

• 実行関数のコードを説明します

• 最初のスクリプトファイルが実行された後、2番目のスクリプトファイルをロードします
2番目のスクリプトファイルがロードされた後、構文解析を実行します
構文解析が完了したら、プリコンパイルが始まります

• 最初のプリコンパイルステップを繰り返します...

• 
  プリコンパイル中に

変数宣言と関数宣言が発生することに注意してください。コンパイルフェーズであり、初期化動作 (代入) はありません)、匿名関数はプリコンパイルには参加しません

• 変数の初期化は解釈と実行フェーズでのみ実行されます

ふーん~最後にまとめます
まとめ


プリコンパイル(関数実行前)※ 1. AOオブジェクト(Active Object)の作成 2. 関数内の関数パラメータと変数宣言を検索し、AOオブジェクトの属性として使用します。値は未定義です
3. 実パラメータと仮パラメータが統合され、実パラメータの値が仮パラメータに代入されます 4. 関数宣言を見つけ、関数名が AO オブジェクトの属性として使用されます、値は関数参照です
プリコンパイル (スクリプト コード ブロック スクリプトが実行される前)

1. グローバル変数宣言を見つけます (暗黙的なグローバル変数宣言を含み、var 宣言は省略します)。変数名はグローバル オブジェクトの属性です。 、値は未定義です

3. 関数宣言を見つけます。関数名はグローバル オブジェクトの属性として使用され、値は関数参照です


プリコンパイルによって動作、この点、スコープおよびパフォーマンスの問題が改善されることを理解します。とても役に立ちました
これらの問題についても今後まとめていきます

上記は JavaScript のプリコンパイル原理の分析です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。