什么是TDZ?在JavaScript当中怎么避免?

news2024/12/21 22:10:48

简介

TDZ 是 Temporal Dead Zone(暂时性死区)的缩写,是 JavaScript 中 let 和 const 变量的一个概念。在 ES6 中,let 和 const 引入了块级作用域(block scope),而它们声明的变量在声明之前的作用域中是不可访问的,这段不可访问的区域就是 暂时性死区。

什么是暂时性死区(TDZ)?

暂时性死区是指在变量声明之前访问该变量时会导致 ReferenceError 的现象。这是因为 let 和 const 声明的变量在作用域内的存在是“已知的”,但它们的实际值直到执行到声明语句时才会被初始化。
情况:
声明前不可访问:在变量声明之前,访问它会导致错误。
声明后可访问:一旦声明语句执行完毕,变量就进入了“活跃”状态,可以被正常访问。

TDZ 的触发情况

TDZ 会在你尝试 访问 变量而该变量还处于“暂时性死区”时触发。它并不会在你声明变量的时候触发,只会在你 使用 变量之前触发。以下是一些典型的情况:

  1. 在声明之前访问变量
  2. 在未声明的块级作用域内使用变量
  3. 在参数默认值中使用 TDZ 变量

示例 1:在声明之前访问变量

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 10;

在这个例子中,let x 的声明使得 x 在其作用域中存在,但它还没有被初始化。在 let x 之前访问 x 会触发 TDZ 错误,抛出 ReferenceError。

示例 2:块级作用域中的 TDZ

{
  console.log(y);  // ReferenceError: Cannot access 'y' before initialization
  let y = 5;
}

在这个块级作用域中,y 在块的作用域范围内是“已知”的,但由于它的声明在后面,试图在 let y 之前访问 y 会触发 TDZ 错误。

示例 3:函数参数默认值中的 TDZ

function foo(x = y, y = 2) {
  return [x, y];
}

foo(); // ReferenceError: Cannot access ‘y’ before initialization
在这个例子中,函数的默认参数 x = y 依赖于参数 y,而 y 在 x 之前定义。这会导致 x 的默认值表达式在 y 被初始化之前使用 y,触发 TDZ 错误。

示例 4:const 的暂时性死区

const 声明的变量也存在 TDZ,并且它们的初始化是不可更改的(必须在声明时赋值)

console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 20;

const z 的行为和 let 相似,z 在声明之前是不可访问的,会触发 TDZ 错误。

如何避免 TDZ 错误?

要避免 TDZ 错误,需要遵循以下几条规则:

  1. 声明前不要访问变量:始终在变量初始化后再进行使用。
  2. 在同一个块级作用域中声明和使用变量:避免在块作用域内跨越声明时使用变量。
  3. 小心参数默认值的顺序:在函数参数默认值中,要注意依赖的变量是否已经声明。

TDZ 的实际用途

TDZ 的主要作用是确保代码更加健壮并且有助于开发者避免一些常见的编程错误:

  1. 防止未初始化变量的使用:TDZ 确保在变量声明之前无法使用该变量,这减少了未初始化变量引发的潜在错误。
  2. 约束 const 和 let
    变量的正确使用:由于 var 声明是函数作用域且会被提升,很多 JavaScript 开发者在 ES5
    之前容易犯因变量提升(Hoisting)导致的错误。let 和 const 的 TDZ
    强制要求开发者必须在变量声明之后再使用它们,从而避免这些问题
  3. 帮助代码可读性:TDZ
    让代码更加明确,开发者在编写代码时可以清晰地知道哪些变量可用,哪些变量尚未初始化。 TDZ 与 var 的区别 与 let 和
    const 相比,var 变量的行为不同,var 声明的变量会被提升到作用域的顶部,并且在初始化前,它们的值是
    undefined,而不是处于 TDZ 中。

示例:

console.log(a);  // undefined (变量提升,值为 undefined)

var a = 10;

这里,var 声明的变量 a 在作用域内被提升,但它的值是 undefined,因此不会触发 TDZ 错误。相对比,如果使用 let 或 const,你会在声明前得到 ReferenceError。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2211445.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

番外篇 | 常用的激活函数汇总 | 20+种激活函数介绍及其公式、图像等

前言:Hello大家好,我是小哥谈。激活函数(Activation Function)是神经网络中的一种重要概念,用于控制神经网络中神经元的激活方式。在传统的神经网络中,激活函数被用来将神经元的输出从数值转换为可以被神经网络其他部分理解的非数值形式。激活函数通常被定义为神经元的输…

电能表预付费系统-标准传输规范(STS)(2)

5. 标准传输规格参考模型 5.1 一般付费电表功能参考图 In a single-device payment meter all the essential functions are located in a single enclosure as depicted in Figure 1 above, while in a multi-device payment meter it is possible for the TokenCarrierToMe…

Pagehelper获取total错误

前言 在使用若依框架的pagehelper时,给分页表设置数据的时候前端只收到了分页的那一页的数据,总记录数不符合要求 我想要的效果如下,可以实现分页,和显示总记录数 但是实际情况为 但是我的数据库有11条记录,他这里明…

【python学习】1-2 配置python系统环境变量

1.点击“我的电脑”右键,点击属性,点击“高级系统设置”,再点击环境变量。 2.选择“系统变量”中的Path后,点击编辑。 3.点击新建,添加如图两个路径,即是python安装的路径位置后,点击确定。

前端脚手架插件安装总结(axios,element-ui,bootstrap,echarts等)

1.打开前端项目终端 输入命令 vue ui 进入图形化界面 a.选择插件 b.选择添加插件 c.安装插件 d.完成安装

手写mybatis之完善ORM框架,增删改查操作

前言 目前这个框架中所提供的 SQL 处理仅有一个 select 查询操作,还没有其他我们日常常用的 insert、update、delete,以及 select 查询返回的集合类型数据。 其实这一部分新增处理 SQL 的内容,也就是在 SqlSession 需要定义新的接口&#xff…

Java 读取word , 作为私有知识库做RAG答疑

检索与生成的技术(RAG),可以提升文本精准度与企业数据相关性 检索增强生成 (RAG) 是一种技术,它结合了检索模型和生成模型,旨在通过私有或专有的数据源来辅助文本生成。在使用大模型时,一个常见问题是模型可能会产生“…

利用Spring Boot优化企业知识管理

1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…

【Java SE】数组的应用

🔥博客主页🔥:【 坊钰_CSDN博客 】 欢迎各位点赞👍评论✍收藏⭐ 目录 1. 数组的概念 1.1 为什么存在数组 1.2 数组是什么 1.3 数组的创建 1.4 数组的初始化 1.4.1 动态初始化 1.4.2 静态初始化 1.4.3 默认值 1.5 数组的使…

【最新华为OD机试E卷-支持在线评测】英文输入法(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…

AD之Layout设计规则

设计规则&#xff1a; 间距 线宽 过孔 铺铜 其他 1.添加类 这里建立了PWR类&#xff0c;与电源相关的网络 2.间距规则:6mil的成本低 3.线宽规则&#xff1a;PWR的优先级排第一&#xff0c;否则不起作用 4.过孔规则&#xff1a;8mil<大小<12mil 4.铺铜规则

音视频开发:FFmpeg库的使用

文章目录 一、FFmpeg的介绍二、FFmpeg的安装三、FFmpeg的使用1.ffplay&#xff1a;播放音视频2.ffprobe&#xff1a;查看视频信息3.ffmpeg&#xff1a;处理视频(1)格式转换(2)帮助 四、参考资料 一、FFmpeg的介绍 FFmpeg 是使用广泛的多媒体框架&#xff0c;是一个强大的音视频…

LeetCode讲解篇之740. 删除并获得点数

文章目录 题目描述题解思路题解代码题解链接 题目描述 题解思路 首先对于这题我们如果将所有点数装入一个切片f中&#xff0c;该切片f中的i号下标表示所有点数为i的点数之和 那么这题就转换成了打家劫舍这道题&#xff0c;也就是求选择了切片中某个下标的元素后&#xff0c;该…

观察者模式和发布-订阅模式的区别

观察者模式是&#xff0c;当被观察者的数据发生变化时&#xff0c;调用被观察者的 notify 方法&#xff0c;去通知所有观察者执行 update 方法进行更新&#xff1b; 对于发布-订阅模式&#xff0c;首先发布者与订阅者互相并不知道彼此的存在&#xff0c;他们是通过事件中心来进…

Element中el-table组件设置max-height右侧出现空白列的解决方法

之前就出现过这个情况&#xff0c;没理过&#xff0c;因为不影响啥除了不美观...但今天看着实在是难受&#xff0c;怎么都不顺眼(可能是我自己烦躁--) 试了很多网上的方法&#xff0c;都不得行&#xff0c;后面发现了这篇文章&#xff0c;解决了! 感谢&#xff01; Element中t…

微知-Mellanox 网卡和NVIDIA Bluefield DPU如何备份firmware?

某些场合需要从网卡或者DPU上读取网卡的firmware 备份命令&#xff1a; flint -d 06:00.0 ri 1.bin实操&#xff1a; 注意&#xff1a; 有些网卡不支持到处firmware

工具软件分享:11个免费的 android数据恢复应用程序功能分析

在手机上丢失数据是一个很大的错误。但是&#xff0c;在这种情况下&#xff0c;除了惊慌失措之外&#xff0c;最好开始使用android数据恢复应用程序搜索以查找将其取回的方法。您可以检查手机的备份存储以在Android上进行数据恢复&#xff0c;但是如果数据仍然无处可寻&#xf…

elementui时间选择器time-picker返回值不对的问题

1. 问题 天杀的elementui的time-picker&#xff0c;导致我开发的系统出现了一次生产问题&#xff0c;原因竟然是因为组件库的bug&#xff01;直接上截图。 如图&#xff0c;正常情况下&#xff0c;选择时间后&#xff0c;想要得到的值理应是当天的时间&#xff0c;如图是当年…

什么是AI网关?AI网关在企业系统中承担什么角色?

AI 大模型的发展正在推动各行业的增长&#xff0c;据有关报告显示&#xff1a;“未来十年内预计年均增长率将达到37.3%&#xff0c;全球企业预计在2027年之前将在AI领域投入8000亿美元"。这一迅猛发展促使许多企业进行战略转型&#xff0c;技术团队也需要调整其构建、运行…

牛客编程初学者入门训练——BC17 缩短二进制

BC17 缩短二进制 描述 我们处理的整数通常用十进制表示&#xff0c;在计算机内存中是以二进制补码形式存储&#xff0c;但通常二进制表示的整数比较长&#xff0c;为了便于在程序设计过程中理解和处理数据&#xff0c;通常采用八进制和十六进制&#xff0c;缩短了二进制补码表…