”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 揭秘 JavaScript:深入探讨提升、临时死区和可变状态

揭秘 JavaScript:深入探讨提升、临时死区和可变状态

发布于2024-07-30
浏览:803

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如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 极简设计初学者指南
    极简设计初学者指南
    我一直是干净和简单的倡导者——这是我的思维最清晰的方式。然而,就像生活中的大多数任务一样,不同的工作有不同的工具,设计也是如此。在这篇文章中,我将分享我发现的极简设计实践,这些实践有助于创建干净简单的网站、模板和图形——在有限的空间内传达必要的内容。 简单可能比复杂更难:你必须努力让你的思维清晰,使...
    编程 发布于2024-11-03
  • 了解 React 应用程序中的渲染和重新渲染:它们如何工作以及如何优化它们
    了解 React 应用程序中的渲染和重新渲染:它们如何工作以及如何优化它们
    当我们在 React 中创建应用程序时,我们经常会遇到术语渲染和重新渲染组件。虽然乍一看这似乎很简单,但当涉及不同的状态管理系统(如 useState、Redux)或当我们插入生命周期钩子(如 useEffect)时,事情会变得有趣。如果您希望您的应用程序快速高效,那么了解这些流程是关键。 ...
    编程 发布于2024-11-03
  • 如何在 Node.js 中将 JSON 文件读入服务器内存?
    如何在 Node.js 中将 JSON 文件读入服务器内存?
    在 Node.js 中将 JSON 文件读入服务器内存为了增强服务器端代码性能,您可能需要读取 JSON 对象从文件到内存以便快速访问。以下是在 Node.js 中实现此目的的方法:同步方法:对于同步文件读取,请利用 fs(文件系统)中的 readFileSync() 方法模块。此方法将文件内容作为...
    编程 发布于2024-11-03
  • 人工智能可以提供帮助
    人工智能可以提供帮助
    我刚刚意识到人工智能对开发人员有很大帮助。它不会很快接管我们的工作,因为它仍然很愚蠢,但是,如果你像我一样正在学习编程,可以用作一个很好的工具。 我要求 ChatGpt 为我准备 50 个项目来帮助我掌握 JavaScript,它带来了令人惊叹的项目,我相信当我完成这些项目时,这些项目将使我成为 J...
    编程 发布于2024-11-03
  • Shadcn UI 套件 - 管理仪表板和网站模板
    Shadcn UI 套件 - 管理仪表板和网站模板
    Shadcn UI 套件是预先设计的多功能仪表板、网站模板和组件的综合集合。它超越了 Shadcn 的标准产品,为那些不仅仅需要基础知识的人提供更先进的设计和功能。 独特的仪表板模板 Shadcn UI Kit 提供了各种精心制作的仪表板模板。目前,有 7 个仪表板模板可用,随着时间...
    编程 发布于2024-11-03
  • 如何使用正则表达式捕获多行文本块?
    如何使用正则表达式捕获多行文本块?
    匹配多行文本块的正则表达式匹配跨多行的文本可能会给正则表达式构造带来挑战。考虑以下示例文本:some Varying TEXT DSJFKDAFJKDAFJDSAKFJADSFLKDLAFKDSAF [more of the above, ending with a newline] [yep, t...
    编程 发布于2024-11-03
  • 软件开发中结构良好的日志的力量
    软件开发中结构良好的日志的力量
    日志是了解应用程序底层发生的情况的关键。 简单地使用 console.log 打印所有值并不是最有效的日志记录方法。日志的用途不仅仅是显示数据,它们还可以帮助您诊断问题、跟踪系统行为以及了解与外部 API 或服务的交互。在您的应用程序在没有用户界面的情况下运行的情况下,例如在系统之间处理和传输数据的...
    编程 发布于2024-11-03
  • 如何在单个命令行命令中执行多行Python语句?
    如何在单个命令行命令中执行多行Python语句?
    在单个命令行命令中执行多行Python语句Python -c 选项允许单行循环执行,但在命令中导入模块可能会导致语法错误。要解决此问题,请考虑以下解决方案:使用 Echo 和管道:echo -e "import sys\nfor r in range(10): print 'rob'&qu...
    编程 发布于2024-11-03
  • 查找数组/列表中的重复元素
    查找数组/列表中的重复元素
    给定一个整数数组,找到所有重复的元素。 例子: 输入:[1,2,3,4,3,2,5] 输出:[2, 3] 暗示: 您可以使用 HashSet 来跟踪您已经看到的元素。如果某个元素已在集合中,则它是重复的。为了保留顺序,请使用 LinkedHashSet 来存储重复项。 使用 HashSet 的 Ja...
    编程 发布于2024-11-03
  • JavaScript 回调何时异步?
    JavaScript 回调何时异步?
    JavaScript 回调:是否异步?JavaScript 回调并非普遍异步。在某些场景下,例如您提供的 addOne 和 simpleMap 函数的示例,代码会同步运行。浏览器中的异步 JavaScript基于回调的 AJAX 函数jQuery 中通常是异步的,因为它们涉及 XHR (XMLHtt...
    编程 发布于2024-11-03
  • 以下是根据您提供的文章内容生成的英文问答类标题:

Why does `char` behave differently from integer types in template instantiation when comparing `char`, `signed char`, and `unsigned char`?
    以下是根据您提供的文章内容生成的英文问答类标题: Why does `char` behave differently from integer types in template instantiation when comparing `char`, `signed char`, and `unsigned char`?
    char、signed char 和 unsigned char 之间的行为差​​异下面的代码可以成功编译,但 char 的行为与整数类型不同。cout << getIsTrue< isX<int8>::ikIsX >() << endl; cou...
    编程 发布于2024-11-03
  • 如何在动态生成的下拉框中设置默认选择?
    如何在动态生成的下拉框中设置默认选择?
    确定下拉框中选定的项目使用 标签创建下拉列表时,您可以可能会遇到需要将特定选项设置为默认选择的情况。这在预填写表单或允许用户编辑其设置时特别有用。在您呈现的场景中, 标记是使用 PHP 动态生成的,并且您希望根据值存储在数据库中。实现此目的的方法如下:设置选定的属性要在下拉框中设置选定的项目,您需...
    编程 发布于2024-11-03
  • Tailwind CSS:自定义配置
    Tailwind CSS:自定义配置
    介绍 Tailwind CSS 是一种流行的开源 CSS 框架,近年来在 Web 开发人员中广受欢迎。它提供了一种独特的可定制方法来创建美观且现代的用户界面。 Tailwind CSS 区别于其他 CSS 框架的关键功能之一是它的可定制配置。在这篇文章中,我们将讨论 Tailwin...
    编程 发布于2024-11-03
  • 使用 jQuery
    使用 jQuery
    什么是 jQuery? jQuery 是一个快速的 Javascript 库,其功能齐全,旨在简化 HTML 文档遍历、操作、事件处理和动画等任务。 “少写多做” MDN 状态: jQuery使得编写多行代码和tsk变得更加简洁,甚至一行代码.. 使用 jQuery 处理事件 jQuery 的另一个...
    编程 发布于2024-11-03
  • CONCAT() 如何增强 MySQL 搜索功能以实现完整名称匹配?
    CONCAT() 如何增强 MySQL 搜索功能以实现完整名称匹配?
    WHERE 子句中使用 MySQL CONCAT() 函数进行高效搜索一种常见的数据库操作是跨多列搜索数据。然而,当分别使用名字和姓氏字段搜索姓名时,可能会存在一些限制,例如捕获不完整的匹配。为了克服这个问题,可以使用 MySQL CONCAT() 函数将列组合成一个用于搜索的单个字段。这提供了更加...
    编程 发布于2024-11-03

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3