首頁 web前端 js教程 揭秘 JavaScript:深入探討提升、臨時死區與可變狀態

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

Jul 26, 2024 pm 06:11 PM

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 變數。
此後,名稱不再位於 TDZ 中,並且可以毫無錯誤地存取或分配。

現在獎勵小費

未宣告與未定義與未初始化之間的差異;

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

例如:- const result =multiplyBy2(5);
直到函數的回傳值將會被指派給結果,直到此時它將處於未初始化區域。

有趣的事實:-

你知道臨時死區最初是為 Const 裝飾的,但他們在 **Let**

中採用了較晚的時間點

參考:-

  1. https://frontendmasters.com/courses/deep-javascript-v3 + 我與 GitHub 副駕駛的類比

以上是揭秘 JavaScript:深入探討提升、臨時死區與可變狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

示例顏色json文件 示例顏色json文件 Mar 03, 2025 am 12:35 AM

示例顏色json文件

8令人驚嘆的jQuery頁面佈局插件 8令人驚嘆的jQuery頁面佈局插件 Mar 06, 2025 am 12:48 AM

8令人驚嘆的jQuery頁面佈局插件

10個jQuery語法熒光筆 10個jQuery語法熒光筆 Mar 02, 2025 am 12:32 AM

10個jQuery語法熒光筆

構建您自己的Ajax Web應用程序 構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

什麼是這個'在JavaScript? 什麼是這個'在JavaScript? Mar 04, 2025 am 01:15 AM

什麼是這個'在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles