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

黄舟

リリース： 2017-02-28 14:28:42

オリジナル

1676 人が閲覧しました

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

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

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

JavaScript の実行三部作

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

構文分析
プリコンパイル
説明と実行

コードを実行する前に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(&#39;so easy&#39;);
    }
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

実行関数のコードを説明します
最初のスクリプトファイルが実行された後、2番目のスクリプトファイルをロードします

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

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

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

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

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

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