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

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

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

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]删除
最新教程 更多>
  • JavaScript中如何动态访问全局变量?
    JavaScript中如何动态访问全局变量?
    在JavaScript 一种方法是使用窗口对象存储和检索变量。通过引用全局范围,可以使用其名称动态访问变量。 //一个脚本 var somevarname_10 = 20; //另一个脚本 window.all_vars = {}; window.all_vars ['somevarnam...
    编程 发布于2025-04-22
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-04-22
  • JavaScript计算两个日期之间天数的方法
    JavaScript计算两个日期之间天数的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    编程 发布于2025-04-22
  • 反射动态实现Go接口用于RPC方法探索
    反射动态实现Go接口用于RPC方法探索
    在GO 使用反射来实现定义RPC式方法的界面。例如,考虑一个接口,例如:键入myService接口{ 登录(用户名,密码字符串)(sessionId int,错误错误) helloworld(sessionid int)(hi String,错误错误) } 替代方案而不是依靠反射...
    编程 发布于2025-04-22
  • Python不会对超范围子串切片报错的原因
    Python不会对超范围子串切片报错的原因
    在python中用索引切片范围:二重性和空序列索引单个元素不同,该元素会引起错误,切片在序列的边界之外没有。这种行为源于索引和切片之间的基本差异。索引一个序列,例如“示例” [3],返回一个项目。但是,切片序列(例如“示例” [3:4])返回项目的子序列。索引不存在的元素时,例如“示例” [9] ...
    编程 发布于2025-04-22
  • 在JavaScript中如何获取实际渲染的字体,当CSS字体属性未定义时?
    在JavaScript中如何获取实际渲染的字体,当CSS字体属性未定义时?
    Accessing Actual Rendered Font when Undefined in CSSWhen accessing the font properties of an element, the JavaScript object.style.fontFamily and objec...
    编程 发布于2025-04-22
  • `console.log`显示修改后对象值异常的原因
    `console.log`显示修改后对象值异常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    编程 发布于2025-04-22
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-04-22
  • MySQL中如何高效地根据两个条件INSERT或UPDATE行?
    MySQL中如何高效地根据两个条件INSERT或UPDATE行?
    在两个条件下插入或更新或更新 solution:的答案在于mysql的插入中...在重复键更新语法上。如果不存在匹配行或更新现有行,则此功能强大的功能可以通过插入新行来进行有效的数据操作。如果违反了唯一的密钥约束。实现所需的行为,该表必须具有唯一的键定义(在这种情况下为'名称'...
    编程 发布于2025-04-22
  • Java中Lambda表达式为何需要“final”或“有效final”变量?
    Java中Lambda表达式为何需要“final”或“有效final”变量?
    Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...
    编程 发布于2025-04-22
  • 如何检查对象是否具有Python中的特定属性?
    如何检查对象是否具有Python中的特定属性?
    方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例,其中尝试访问不确定属性会引起错误: >>> a = someClass() >>> A.property Trackback(最近的最新电话): 文件“ ”,第1行, AttributeError: SomeClass...
    编程 发布于2025-04-22
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-04-22
  • PHP与C++函数重载处理的区别
    PHP与C++函数重载处理的区别
    作为经验丰富的C开发人员脱离谜题,您可能会遇到功能超载的概念。这个概念虽然在C中普遍,但在PHP中构成了独特的挑战。让我们深入研究PHP功能过载的复杂性,并探索其提供的可能性。在PHP中理解php的方法在PHP中,函数超载的概念(如C等语言)不存在。函数签名仅由其名称定义,而与他们的参数列表无关。...
    编程 发布于2025-04-22
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在Silverlight应用程序中,尝试使用LINQ建立LINQ连接以错误而实现的数据库”,无法找到查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中...
    编程 发布于2025-04-22

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

Copyright© 2022 湘ICP备2022001581号-3