[JS]-護衛


Hoisting ?


📝 宣言された変数、関数、クラスの宣言を範囲(scope)に基づいて最上位レベルの概念にドラッグ&ドロップします.
これはinterpreterが解釈コード時に変数と関数の宣言処理,実際のコード実行の2段階(宣言,初期化)で処理することによる現象である.
📌 宣言も分配も言わない.宣言簿だけ引いて、配らない
📌 加速は実際のメモリに影響しません
解釈プログラム:ソースコードを直接実行するコンピュータプログラムまたは環境
コンパイラ(compiler):interpriterとは逆の概念で、元のコードをマシン言語に翻訳します.

シースの適用


1」varとして宣言された変数

  • varは宣言と同時に未定義に初期化される.
    👉🏻 したがって、scopeに変数が存在するため、変数宣言文の前に変数にアクセスしても、未定義の変数が返されます.その後、変数付与文に達すると、値が割り当てられます.
  • console.log(text);
    // output = undefined
    👉🏻 宣言+が初期化されているため、Undefindに戻ります.
    text = 'hi!'
    var text;
    //output = 'hi!'
    👉🏻 宣言+初期化+割当ステータス

    2"let,const宣言の変数


  • letとconstはvarとは異なり,それぞれ宣言フェーズと初期化フェーズにある.
    👉🏻 初期化されず、宣言のみがメモリに保存されます.初期化されていないため、変数を参照できません.そのため、参照エラーを返します.

  • スキャンの開始点から初期化の開始点までは変数を参照できません.オシロスコープの開始点から初期化開始点までの区間を一時死角領域と呼ぶ.
  • 👉🏻 letとconstはこのようなTDZに陥り、エラーを引き起こす.

    📌 let

    console.log(text);
    let text;
    //output = ReferenceError
    👉🏻 宣言のみで初期化されていないため、変数を参照できず、参照エラーが発生します.

    📌 const

    const text;
    //error
    👉🏻 constは宣言と同時に割り当てる必要があるため、エラーが発生しました.

    3ππ関数宣言式宣言関数

    test();
    function test(){
    	console.log("hi")
    }
    //output = 'hi`
    👉🏻 コード実行前の関数宣言がメモリに格納されているため、エスケープが発生します.
    📝 関数式はハイライトされません

    📌 サマリ


    JAvascriptエンジンは、コードを実行する前に、実行可能なコードをイメージ化して区別します(実行コンテキストを形成します).
    このプロセスでは、すべての宣言(var、let、const、function、class)が変数オブジェクトメモリに格納されます.
    コードが実行される前に変数と関数の宣言が保存されているため、参照と呼び出しが宣言より先に行われても操作できます.
    これは、宣言文がファイルの最上位レベルに昇格したように見えます(エスケープされたように)