動図学JavaScript之:宣言昇格(Hoisting)

背景
JSは言語設計の欠陥(工期が足りない?)のため、中には不思議な特性があり、初心者が出会った後、黒人の疑問符を満面にする可能性があります.今日紹介するのは、声明の向上(Hoisting)です.
もしあなたがJSの初心者であれば、undefinedまたはReferenceErrorsの間違いに遭遇することがありますが、声明の昇進が元凶になる可能性があります. 変数と関数をファイルの上部に置くとよく解釈されますが、表面的にはそう見えますが、事実はそうではありません.
コンパイルフェーズ
JSエンジンが私たちのスクリプトを解析し始めると、最初のことは私たちのコードの変数にメモリを設定することです.このフェーズコードはまだ実行されていません.後のコード実行の準備をしているだけです.このフェーズはコンパイルフェーズです.
この段階の一部の仕事は、すべての宣言を見つけ、適切な役割ドメインで関連付けることです(役割ドメインに関する部分は後述します).
たとえば、var a = 2；JSエンジンは、var a;とa = 2;の2つの宣言と見なします.最初の定義宣言はコンパイルフェーズで行われ、2番目の付与宣言は で実行フェーズを待機します.
コンパイルフェーズでは、関数宣言と変数宣言の格納方法が異なります.
関数宣言の格納方法
関数宣言のストレージは、メモリに関数全体の参照が格納されます.(関数宣言と関数式の違いに注意)
次の図のコードは、関数sumの宣言を参照してください.
letとconstが宣言した変数の格納方法
変数の格納が違います.ES 6には、letとconstの2つの新しいキーワードが導入されています.この2つのキーワードで定義された変数は、uninitializedの値が格納されています.
var宣言変数の格納方法varで宣言された変数で、格納時のデフォルト値はundefined実行フェーズ
コンパイルフェーズが完了しました.JSエンジンはコードを実行します.ファイルの上部に3つのconsole.log文を追加します.
事前呼び出し関数
前述したように、コンパイルフェーズでは、関数宣言は関数全体の参照を格納するため、関数宣言の前に関数を呼び出すことができます.
var定義を事前に使用する変数cityという変数を事前に使用すると、varキーワード定義のデフォルト値undefinedが印刷されます.多くの場合、この行為は困惑します.あなたはその値がundefinedであることを望んでいないからです.
constとletで定義した変数を事前に使用varの問題を解決するために、constとletがあり、定義された変数のデフォルト値uninitializedに事前にアクセスすると、ReferenceErrorが投げ出されます.この行為には覇気の名前があります.一時的なデッドゾーン(Temporal Dead Zone)です.つまり、この変数を初期化する前にアクセスできません.
割り当て操作の続行
JSエンジンがコードを解釈し続けると、ある行に付与文があると解釈され、メモリの値がコードで定義された値に上書きされます.
(上図の番号は7ハ~)
まとめ
振り返ってみると:

関数および変数は、コンパイル時に宣言部分をメモリに格納します.これは、宣言のアップグレードです(実行コンテキストの概念にも関連していますが、後述します)

関数宣言は関数全体の参照を格納し、var宣言された変数はundefined、letおよびconst宣言された変数のデフォルト値はuninitialized

である.
分かりましたか?本文は作者Lydia Hallieのシリーズの文章に翻訳して、一部の内容は詳しく説明して、以下は3編あって、公衆番号を購読して更新に注目することを歓迎します:

動図学JavaScript之:宣言昇格(Hoisting)【本編】

動図学JS之：作用域チェーン（Scope Chain）

動図学JS之：イベントループ（Event Loop）

動図学JS之：JavaScriptエンジン

動図学JS之：プロトタイプ継承

参考資料

JavaScript Visualized Hoisting

Temporal Dead Zone

あなたの知らないJavaScript上巻

本文は公衆番号に先発する:コード力全開(codingonfire) に注目して返信し、技術者の副業秘籍を取得する