ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの基礎知識まとめ (8) コンパイル前実行処理

JavaScriptの基礎知識まとめ (8) コンパイル前実行処理

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-10 13:31:331715ブラウズ

今回は JavaScript の基礎知識まとめをお届けします。 基礎的な JavaScript の知識まとめ (8) 実践的なケースを見てみましょう。

JS 実行三部作

ステップ 1: 構文分析

パート 2: プリコンパイル

パート 3: 解釈と実行

プリコンパイル

構文分析は意味分析とも呼ばれ、構文分析は記事全体ですたとえば、実行のプロセス。これらのコードは実行されると、1 行ずつ解釈されて実行されます。ただし、システムは実行の最初のステップでコードをスキャンします。 は、低レベルの構文エラーです。たとえば、括弧や漢字などが少ない場合、テキスト全体をスキャンしますが、この全文スキャン プロセスは、スキャン後の構文解析と呼ばれます。全文だとプリコンパイルして一行解釈してから実行します 一行、つまり説明と実行

プリコンパイル前置き

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
eg : a = 123;
eg : var a = b = 123;

宣言されたグローバル変数は全て

ウィンドウのプロパティ

  eg:var a = 123;===> window.a = 123;
//例子:
   function test (){        console.log("a");
   }  
   test();//成功打印出a,
   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
   function box (){        console.log("a");
   }    
   var a =123;    console.log(a);//输出123
   console.log(a);//输出undefined,不报错;
    var a = 123;    
    //但是如果直接打印会报错;
    console.log(b)//报错
    //也是预编译的效果
    
    //如果想偷懒记住两句话
    //函数声明整体提升
    //变量 声明提升

改善点を説明します。関数宣言の説明: 関数宣言を記述する場合、どこに記述しても、システムは常にこの関数をロジックの先頭に持ってくるため、どこで呼び出しても、上または下で呼び出されても、基本的にはこれは関数の下で呼び出され、常に関数の宣言をプロモートします。ロジックの先頭に移動します

変数宣言は、たとえば

var a = 123;//実際には 2 つの部分です。 of var a;//最初に変数を宣言します

a = 123;//変数に値を代入します

それでシステムは改善されます変数の代わりに変数が値と一緒に発生するので、例では a が出力されますout unknown;

これら 2 つの文は全能ではないことに注意してください

たとえば、

function a(a){    var a = 123;    var a = function(){        
    }
    a();
}var a = 123;

これはこれら 2 つの文では解決できません

上記を説明する前に、まず impiy global とは何かを理解する必要があります

imply globa: 暗黙グローバル変数: つまり、宣言されずに変数に値が割り当てられた場合、独立変数がすべてのグローバル オブジェクトの代わりになります

例: a = 123;

例: var a = b = 123;

a = 10; console.log(a); // 10 を出力し、window 属性に 10 を指定します。 var b = 20; // Window にはグローバル ドメインもあります


公式にプリコンパイルされています

AOオブジェクトを作成します

仮パラメータと変数宣言を探し、変数名と仮パラメータ名をAO属性名として使用します、値は未定義です

実パラメータ値と仮パラメータを変更します

関数本体内の関数宣言を探して、関数本体に値を代入します

function fn (a){    console.log(a);    
    var a = 123;    console.log(a);    
    function a (){};    console.log(a);    
    var b = function (){        
    }    console.log(b);        
}
fn(1);

この例では、パラメータ、変数、関数名をすべてaと呼びます まず、上書き現象が起こるのは確実です。これは、関数のプリコンパイルが関数の実行直前に実行されると言われていることと非常に矛盾しています

まず、プリコンパイル

。最初のステップ: AO オブジェクトを作成します。フルネームは です。 Activation オブジェクトはスコープであり、実行コンテキストとも呼ばれます

AO{    
}

ステップ 2: 仮パラメータと変数宣言を見つけ、変数名と仮パラメータ名を AO 属性名として使用します。値は未定義です

AO{    a : undefined
    b : undefined
}

ステップ3: 実パラメータの値を変更します仮パラメータで統一します

AO{    a : 1;    b : undefined
}

ステップ4: 関数本体内の関数宣言を見つけて、関数本体に値を代入します

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
    d : 
}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}
    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    d : function d () {}
}

この時点で、プリコンパイルプロセスが終了し、コードの実行を開始し、関数を実行します

次に、上記の例を見ていきます

//预编译结果AO{    a : function a () {}
    b : undefined,    d : function d () {}
}//开始执行代码function fn (a){    //第一步开始打印a
    //根据上面预编译的结果,
    //所以打印结果是function a () {}
    console.log(a);    
    //第二步执行 var a = 123;
    //因为在预编译的第二步里面,变量已经提升了
    //所以第二步只执行的赋值
    //a = 123;去AO对象里面去找a
    //也就变成
    //AO{
        //a : 123   这个才是a的存储值
        //b : undefined,
        //d : function d () {}
    //}
    var a = 123;    //所以打印出123
    console.log(a);    //因为这句在话在预编译的时候系统已经看了
    //所以不在看这句话
    function a (){};    //所以下面的console.log(a)
    //还是打印123;
    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看
    //AO{
        //a : 123   
        //所以b的值变成function(){}
        //b : function(){}
        //d : function d () {}
    //}
    var b = function (){
        
    }    //所以打印出function(){}
    console.log(b);
        
}

fn(1);


例を見ていきます

function test(a , b){    console.log(a);
    c = 0;    var c;
    a = 3;
    b = 2;    console.log(b);    function b () {}    console.log(b);
}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2

プリコンパイルは行われません関数本体でのみ発生しますが、グローバル コンテキストでも発生します

グローバル コンテキストの最初のステップは、最初に GO グローバル オブジェクトを生成することです。他は同じです

GO === window

次に問題は、 GO が先か、AO が先か

答えは、GO を先に実行することです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 !

関連書籍:

JavaScriptの基礎知識のまとめ(6) 関数、初期スコープ(前編)


JavaScriptの基礎知識のまとめ(6) 関数、初期スコープ(後編)


JavaScriptの基礎知識まとめ(7)再帰

以上がJavaScriptの基礎知識まとめ (8) コンパイル前実行処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。