」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 揭秘 JavaScript:深入探討提升、臨時死區與可變狀態

揭秘 JavaScript:深入探討提升、臨時死區與可變狀態

發佈於2024-07-30
瀏覽:558

Unraveling JavaScript: A Deep Dive into Hoisting, Temporal Dead Zone, and Variable States

下面我有兩行簡單的程式碼。但我可以向你保證,它要么會讓你很困惑(因為你忽略了 JS 的下劃線原則),要么安慰你。

但是它已經加載瞭如下知識概念

  • 吊掛
  • 暫時死區
  • 變數(未聲明、未初始化、未定義)(獎勵)

我的矛盾聲明
就像 var、const 和 let 也提升它們的屬性,但它們位於不同的區域。

吊掛Def(簡單/外行版)

  1. 我們可以在實際宣告之前存取函數和變數。

現在是時候深入了解Js如何編譯和執行我們的兩行程式碼了

在 JavaScript 中,編譯器和引擎處理變數宣告和賦值的方式可能有細微差別,尤其是在處理 let 和 var 時。
讓我們從編譯器和執行的角度來分解給定程式碼的過程:

name = 'ashu';
let name;

此時我明確表示,當我們寫 javascript 程式碼時,第一個解析器和編譯器會編譯我們的程式碼,然後進入執行階段。

編譯器視角
第一行: name = 'ashu';

編譯階段
JavaScript 引擎解析程式碼並建立必要的範圍。
作業名稱 = 'ashu';

會註明,但在這個階段,引擎不執行程式碼;它僅記錄對名為 name 的變數的賦值的存在。

如果 name 之前沒有聲明過,編譯器會將其視為對全域變數(全域作用域中的 var name)的賦值,因為 var 聲明被提升並可以全域存取。

第二行: 命名;

當編譯器遇到let名稱時;聲明,它承認 name 應該是區塊作用域的。

編譯者將名稱放置在臨時死區 (TDZ) 其所屬範圍,
意味著它承認名稱的存在,但將其標記為未初始化

let 聲明不以與 var. 相同的方式提升

相反,它在作用域中創建一個綁定,並僅在執行聲明時對其進行初始化

執行觀點

第一行: name = 'ashu';

當JavaScript引擎執行賦值name = 'ashu';時,
它檢查目前範圍內名稱是否存在。由於 name 是用 let 聲明的,但位於 TDZ(臨時死區)中, 在初始化 let 聲明之前訪問它的任何嘗試都將導致 ReferenceError。

因此,此時name在TDZ中,賦值name = 'ashu';導致 ReferenceError.


第二行: 命名;

這一行初始化區塊作用域內的name變數。
此後,name 不再位於 TDZ 中,可以毫無錯誤地存取或指派。

現在獎勵小費

未聲明與未定義與未初始化之間的區別;

undeclare :- 變數尚未宣告。
undefined :- 宣告變數但未初始化;
未初始化 :- 變數已定義,但其值將在稍後出現。

Ex:- const result =multiplyBy2(5);
直到函數的返回值將分配給結果,直到那時它將處於未初始化區域。

有趣的事實:-

你知道臨時死區最初是為 Const 裝飾的,但他們在 **Let** 中採用的時間點很晚

參考:-

  1. https://frontendmasters.com/courses/deep-javascript-v3 我與 GitHub co-pilot 的類比
版本聲明 本文轉載於:https://dev.to/ashutoshsarangi/unraveling-javascript-a-deep-dive-into-hoisting-temporal-dead-zone-and-variable-states-4d0j?1如有侵犯,請聯絡study_golang @163.com刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3