JavaScript のリフティング動作と原理の分析

黄舟

リリース： 2017-02-28 14:43:13

オリジナル

1043 人が閲覧しました

JavaScript を学んだばかりの学生にとって、その動作の一部は混乱するかもしれません

学校で学んだ C/C++ とは大きく異なります
たとえば、この場合

a = 1;var a;console.log(a);// 1

ログイン後にコピー

一部の学生は、そうすべきだと考えるかもしれませんはい、var a が a に再割り当てされているようです
これが再び当てはまる場合は

console.log(a);// undefinedvar a = 1;

ログイン後にコピー

a が宣言される前に出力されるため、エラーであるか、ブラウザの動作に基づいて 2 が出力されるはずです上記
ただし、結果は未定義です

表示されるコードの順序は、必ずしも JS エンジンによって実際に実行される順序とは限りません
これが、今日話したい JavaScript の改善動作です
実は、この記事の執筆はプリコンパイルの補足です知識
読む前にプリコンパイルについて知らない方は、以下をクリックしてください
JavaScriptのプリコンパイル
JavaScriptのプリコンパイルはプロモーション動作に直結します

プロモーション動作

実際、プリコンパイルを理解した後、理由を明確に理解する
実行前にプリコンパイルが発生する Compile
したがって、これら 2 つのコードブロックを実行するときは、次のようなコードを実行するのと同じです

var a;a = 1;console.log(a);// 1

ログイン後にコピー

var a;console.log(a);// undefineda = 1;

ログイン後にコピー

この昇格動作については、次の 2 つの文を覚えておいてください
変数宣言の昇格、関数宣言全体の昇格
もう一度強調します

function demo(){….}这才叫做函数声明 
var demo = function(){….}这不叫函数声明

ログイン後にコピー

実際、プリコンパイルの原理を理解していれば、プロモーション動作は簡単に理解できます

私たちは var a = 1 をステートメントとして扱うことに慣れていますvar a = 1 看做一个声明
可是js引擎却不这么认为，它会把它拆成var = a声明与 a = 1しかし、JS エンジンはそうは考えず、それを var = a に分割します。宣言は a = 1 で初期化されます
、最初はコンパイル段階のタスクであり、 2 つ目は実行フェーズのタスクです
したがって、宣言がスコープ内にどのようなものであっても、実行前にすべての場所が事前に処理されます
これは、変数宣言と関数宣言をスコープの先頭に移動するのと同じです
このプロセスはリフティング

プログラミングプロセス中に、同じ名前の関数や通常の変数はもちろんのこと、変数を重複して宣言してはなりません
ちなみに、スコープの先頭に var を付けて変数を宣言するのは良い習慣です(単一変数原則)
このようにして、昇進行動について心配する必要はありません

分析例

それでも、面接の質問の焦点でもあるこのプロセスを理解する必要があります
古い質問を見てみましょう-流行の例を見てみましょう

function a(a, b){
    console.log(a);    console.log(c);
    c = 0;    console.log(b);
    var c;
    a = 3;
    b = 2;    console.log(a);    console.log(c);    console.log(b);    function b(){};
    console.log(b);
}
a(1);

ログイン後にコピー

混乱しているかも知れませんが、abc がたくさんあります
正解は次のとおりです:

1   undefined    function b(){}    3    0    2    2

ログイン後にコピー

ところで、まずプリコンパイルから分析しましょう

AO オブジェクト (アクティブオブジェクト) を作成します。
関数内の仮パラメーターと変数宣言を検索します。仮パラメーター名と変数名は、AO オブジェクトの属性として使用されます
。実パラメータと仮パラメータは統一されており、実パラメータの値が仮パラメータに代入されます
関数宣言を見つけて、関数名はAOオブジェクトの属性として使用され、その値が関数参照になります

最後の関数 a が実行される前生成された AO オブジェクトは次のようになります

//伪代码AO->{
    a: 1
    b: function(){}
    c: undefined}

ログイン後にコピー

したがって、このような関数を実行することと同じです
(関数名 a は内部の変数と競合しません)

function a(){    var a = 1;    var b = function(){};    var c;

    console.log(a);//1
    console.log(c);//undefined
    c = 0;
    console.log(b);//function(){}
    a = 3;
    b = 2;
    console.log(a);//3
    console.log(c);//0
    console.log(b);//2
    console.log(b);//2}

ログイン後にコピー

それで答えが得られます簡単に

変数宣言と関数宣言が同じ名前の場合
関数宣言が変数宣言をオーバーライドする必要があります(JavaScript関数はさまざまな権限の最初の市民です)
変数宣言が同じ名前の場合別の変数宣言として
、または関数宣言が別の関数宣言と同じ名前を持つ
それが誰です。文書の下で誰が優先権を持ちますか