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

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

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

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刪除
最新教學 更多>
  • Hexabot 設定與視覺化編輯教學:建立您的第一個 AI 聊天機器人
    Hexabot 設定與視覺化編輯教學:建立您的第一個 AI 聊天機器人
    聊天機器人愛好者大家好!在本教程中,我們將引導您完成設定和使用開源 AI 聊天機器人建構器 Hexabot 的過程。我們將首先克隆 GitHub 儲存庫、安裝依賴項並為 Hexabot 配置環境變數。您還將學習如何使用 Docker 啟動專案、存取管理面板以及使用視覺化編輯器建立聊天機器人流程。 ...
    程式設計 發佈於2024-11-02
  • mysql_fetch_row()、mysql_fetch_assoc() 和 mysql_fetch_array():您應該選擇哪一個?
    mysql_fetch_row()、mysql_fetch_assoc() 和 mysql_fetch_array():您應該選擇哪一個?
    mysql_fetch_row()、mysql_fetch_assoc() 和mysql_fetch_array() 解釋背景:[&SQL&]如果您正在使用已棄用的MyMy擴充功能中,在從結果集中檢索資料的mysql_fetch_row()、mysql_fetch_assoc() 和mysql_fe...
    程式設計 發佈於2024-11-02
  • Next.js - 概述
    Next.js - 概述
    本文作為初學者友好的指南和使用 Next.js 的步驟。 Next.js 是一個用於建立 Web 應用程式的靈活框架。相反,它是一個建立在 Node.js 之上的 React 框架。 設定您的 Next.js 專案 要啟動新的 Next.js 項目,您需要在電腦上安裝 Node.js。 安裝 ...
    程式設計 發佈於2024-11-02
  • 如何在程式碼中使用 Unsplash 圖片
    如何在程式碼中使用 Unsplash 圖片
    身為從事新 SaaS 專案的開發人員,我需要直接透過 URL 連結一些 Unsplash 圖片。 最初,我看到一篇推薦使用 https://source.unsplash.com/ API 的文章(連結)。但是,此方法不再有效,僅從 URL 欄位複製連結並不能提供嵌入所需的直接圖像 URL。 h...
    程式設計 發佈於2024-11-02
  • 如何合併關聯數組、處理缺失鍵、填滿預設值?
    如何合併關聯數組、處理缺失鍵、填滿預設值?
    合併多個關聯數組並添加具有預設值的缺失列將關聯數組與不同的鍵集組合起來創建統一的數組可能具有挑戰性。這個問題探索了一種實現此目的的方法,所需的輸出是一個數組,其中鍵被合併,缺失的列用預設值填充。 為了實現這一點,建議結合使用 array_merge 函數精心設計的鍵數組:$keys = array(...
    程式設計 發佈於2024-11-02
  • 透過 testcontainers-go 和 docker-compose 來利用您的測試套件
    透過 testcontainers-go 和 docker-compose 來利用您的測試套件
    Welcome back, folks! Today, we will cover the end-to-end tests in an intriguing blog post. If you've never written these kinds of tests or if you stri...
    程式設計 發佈於2024-11-02
  • 以下是一些適合您文章的基於問題的標題:

**直接簡潔:**

* **如何在Windows控制台中正確顯示UTF-8字元? ** **
* **為什麼傳統方法無法顯示
    以下是一些適合您文章的基於問題的標題: **直接簡潔:** * **如何在Windows控制台中正確顯示UTF-8字元? ** ** * **為什麼傳統方法無法顯示
    在Windows 控制台中正確顯示UTF-8 字元使用傳統方法在Windows 控制台中顯示UTF-8 字元的許多嘗試均失敗正確渲染擴充字元。 失敗嘗試:一個使用 MultiByteToWideChar() 和 wprintf() 的常見方法被證明是無效的,只留下 ASCII 字元可見。此外,使用 ...
    程式設計 發佈於2024-11-02
  • ReactJS 的模擬介紹
    ReactJS 的模擬介紹
    ReactJS 19:重要部份 並發模式增強: ReactJS 19 中最大的改進是並發模式,它不僅在應用程式自身更新時保持UI 平滑和響應靈敏,而且還確保了無縫界面,尤其是在復雜的過渡(例如動畫)時。 改進的伺服器元件: 在 Python 的引領下,ReactJ...
    程式設計 發佈於2024-11-02
  • 首屆DEV網頁遊戲挑戰賽評審
    首屆DEV網頁遊戲挑戰賽評審
    我被要求對DEV團隊9月份組織的第一屆網頁遊戲挑戰賽提交的參賽作品進行評判,結果在10月初發布。 我們幾個月來一直在 DEV 上組織挑戰(迷你黑客馬拉松),併計劃宣布我們的第一個網頁遊戲挑戰。鑑於您在遊戲社群 和 dev.to 的專業知識和參與度,我們想知道您是否有興趣成為客座評審。 誰能對此說...
    程式設計 發佈於2024-11-02
  • 購買經過驗證的現金應用程式帳戶:安全可靠的交易
    購買經過驗證的現金應用程式帳戶:安全可靠的交易
    Buying verified Cash App accounts is not recommended. It can lead to security risks and potential account bans. If you want to more information just k...
    程式設計 發佈於2024-11-02
  • 為什麼 `std::function` 缺乏相等比較?
    為什麼 `std::function` 缺乏相等比較?
    揭開std::function 的等式可比性之謎難題:為什麼是std::&&]難題:為什麼是std:: function,現代C 程式碼庫的一個組成部分,不具備相等比較功能?這個問題從一開始就困擾著程式設計師,導致管理可呼叫物件集合的混亂和困難。 早期的歧義:在C 語言的早期草案中11 標準中,op...
    程式設計 發佈於2024-11-02
  • JavaScript 類型檢查 |程式設計教學
    JavaScript 類型檢查 |程式設計教學
    介紹 本文涵蓋以下技術技能: 在本實驗中,我們將探索一個 JavaScript 函數,該函數檢查提供的值是否屬於指定類型。我們將使用 is() 函數,它利用建構子屬性和 Array.prototype.includes() 方法來確定值是否屬於指定類型。本實驗將幫助您更了解 Jav...
    程式設計 發佈於2024-11-02
  • 使用 Streamlit 將機器學習模型部署為 Web 應用程式
    使用 Streamlit 將機器學習模型部署為 Web 應用程式
    介绍 机器学习模型本质上是一组用于进行预测或查找数据模式的规则或机制。简单地说(不用担心过于简单化),在 Excel 中使用最小二乘法计算的趋势线也是一个模型。然而,实际应用中使用的模型并不那么简单——它们通常涉及更复杂的方程和算法,而不仅仅是简单的方程。 在这篇文章中,我将首先构...
    程式設計 發佈於2024-11-02
  • ## utf8_unicode_ci 與 utf8_bin:哪一種 MySQL 排序規則最適合德國網站?
    ## utf8_unicode_ci 與 utf8_bin:哪一種 MySQL 排序規則最適合德國網站?
    為德語選擇最佳MySQL 排序規則為德語選擇最佳MySQL 排序規則在設計為德語受眾量身定制的網站時,支持像ä、 ü 和ß。當涉及特定於語言的要求時,排序規則的選擇起著重要作用。 字元集和排序規則對於字元處理,UTF-8 仍然是首選選項,提供廣泛的字元支援。至於排序規則,則需要考慮德語特定字元。 排...
    程式設計 發佈於2024-11-02
  • 異常處理基礎知識
    異常處理基礎知識
    Java中的例外處理由五個關鍵字管理:try、catch、 throw、throws和finally。 這些關鍵字構成了一個相互關聯的子系統。 要監視的指令位於 try 區塊內。 如果try區塊中發生異常,則會拋出異常。 程式碼可以使用catch捕獲並處理異常。 系統異常由Java執行時...
    程式設計 發佈於2024-11-02

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

Copyright© 2022 湘ICP备2022001581号-3