JavaScript 基础教程

JavaScript 首页 JavaScript 路线图 JavaScript 概述 JavaScript 功能特性 JavaScript 启用 JavaScript 位置 JavaScript 语法 JavaScript Hello World JavaScript Console.log() JavaScript 注释 JavaScript 变量 JavaScript let 语句 JavaScript 常量 JavaScript 数据类型 JavaScript 类型转换 JavaScript 严格模式 JavaScript 保留关键字

JavaScript 运算符

JavaScript 运算符 JavaScript 算术运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 位运算符 JavaScript 赋值运算符 JavaScript 条件运算符 JavaScript typeof 运算符 JavaScript 空值合并运算符 JavaScript 安全赋值运算符 JavaScript 删除运算符 JavaScript 逗号运算符 JavaScript 分组运算符 JavaScript Yield 运算符 JavaScript 展开运算符 JavaScript 幂运算符 JavaScript 运算符优先级

JavaScript 控制流

JavaScript If...Else JavaScript While 循环 JavaScript For 循环 JavaScript For...in JavaScript For...of JavaScript 循环控制 JavaScript Break 语句 JavaScript Continue 语句 JavaScript Switch Case JavaScript 用户定义迭代器

JavaScript 函数

JavaScript 函数 JavaScript 函数表达式 JavaScript 函数参数 JavaScript 默认参数 JavaScript Function() 构造函数 JavaScript 函数提升 JavaScript 自调用函数 JavaScript 箭头函数 JavaScript 函数调用 JavaScript 函数 call() 方法 JavaScript 函数 apply() 方法 JavaScript 函数 bind() 方法 JavaScript 闭包 JavaScript 变量作用域 JavaScript 全局变量 JavaScript 智能函数参数

JavaScript 对象

JavaScript Number JavaScript Boolean JavaScript Strings JavaScript Arrays JavaScript Date JavaScript DataView JavaScript Handler JavaScript Math JavaScript RegExp JavaScript Symbol JavaScript Sets JavaScript WeakSet JavaScript Maps JavaScript WeakMap JavaScript 可迭代对象 JavaScript Reflect JavaScript TypedArray JavaScript 模板字面量 JavaScript 带标签的模板

面向对象的 JavaScript

JavaScript 对象 JavaScript 类 JavaScript 对象属性 JavaScript 对象方法 JavaScript 静态方法 JavaScript 显示对象 JavaScript 对象访问器 JavaScript 对象构造函数 JavaScript 原生原型 JavaScript ES5 对象方法 JavaScript 封装 JavaScript 继承 JavaScript 抽象 JavaScript 多态 JavaScript 解构 JavaScript 解构赋值 JavaScript 对象解构 JavaScript 数组解构 JavaScript 嵌套解构 JavaScript 可选链式调用 JavaScript 全局对象 JavaScript Mixins (混合) JavaScript 代理

JavaScript 版本

JavaScript 历史 JavaScript 版本 JavaScript ES5 JavaScript ES6 ECMAScript 2016 ECMAScript 2017 ECMAScript 2018 ECMAScript 2019 ECMAScript 2020 ECMAScript 2021 ECMAScript 2022

JavaScript 异步

JavaScript 异步 JavaScript 回调函数 JavaScript Promises JavaScript Async/Await JavaScript Microtasks (微任务) JavaScript Promises JavaScript Promises 链 JavaScript 定时事件 JavaScript setTimeout() JavaScript setInterval()

JavaScript Cookies

JavaScript Cookies JavaScript Cookie 属性 JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型 JavaScript Window 对象 JavaScript Document 文档对象 JavaScript Screen 对象 JavaScript History 对象 JavaScript Navigator 对象 JavaScript Location 对象 JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API JavaScript History API JavaScript Storage API JavaScript Forms API JavaScript Worker API JavaScript Fetch API JavaScript Geolocation API

JavaScript 事件

JavaScript 事件 JavaScript DOM 事件 JavaScript addEventListener() JavaScript 鼠标事件 JavaScript 键盘事件 JavaScript 表单事件 JavaScript 窗口/文档事件 JavaScript 事件委托 JavaScript 事件冒泡 JavaScript 事件捕获 JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理 JavaScript try...catch JavaScript 调试 JavaScript 自定义错误 JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this 关键字 JavaScript void 关键字 JavaScript new 关键字 JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM JavaScript DOM 方法 &属性 JavaScript DOM 文档 JavaScript DOM 元素 JavaScript DOM 属性 (Attr) JavaScript DOM 表单 JavaScript 修改 HTML JavaScript 修改 CSS JavaScript DOM 动画 JavaScript DOM 导航 JavaScript DOM 集合 JavaScript DOM NodeList JavaScript DOM DOMTokenList

JavaScript 高级章节

JavaScript 冒泡排序算法 JavaScript 循环引用错误 JavaScript 使用 Jest 进行代码测试 JavaScript CORS 处理 JavaScript 数据分析 JavaScript 死区 JavaScript 设计模式 JavaScript Engine 和 Runtime JavaScript 执行上下文 JavaScript 函数组合 JavaScript 不可变性 JavaScript Kaboom.js JavaScript 词法作用域 JavaScript 本地存储 JavaScript 记忆化 JavaScript 压缩 JS JavaScript 可变性 vs 不可变性 JavaScript 包管理器 JavaScript 解析 S 表达式 JavaScript 原型继承 JavaScript 响应式 JavaScript Require 函数 JavaScript Selection API JavaScript SessionStorage JavaScript SQL CRUD 操作 JavaScript 增强排序 JavaScript 临时死区 JavaScript 节流 JavaScript TRPC 库 JavaScript 真值和假值 JavaScript 上传文件 JavaScript 日期比较 JavaScript 递归 JavaScript 数据结构 JavaScript Base64 编码 JavaScript 回调函数 JavaScript 当前日期/时间 JavaScript 日期验证 JavaScript 过滤方法 JavaScript 生成颜色 JavaScript HTTP 请求 JavaScript 插入排序 JavaScript 延迟加载 JavaScript 链表 JavaScript 嵌套循环 JavaScript 空值检查 JavaScript 获取当前 URL JavaScript 图算法 JavaScript 高阶函数 JavaScript 空字符串检查 JavaScript 表单处理 JavaScript 函数式编程 JavaScript 形参 vs 实参 JavaScript 原型 JavaScript 响应式编程 JavaScript Reduce 方法 JavaScript Rest 运算符 JavaScript 短路 JavaScript 未定义检查 JavaScript 单元测试 JavaScript 验证 URL

JavaScript 杂项

JavaScript Ajax JavaScript 异步迭代 JavaScript Atomics 原子对象 JavaScript Rest 参数 JavaScript 页面重定向 JavaScript 对话框 JavaScript 页面打印 JavaScript 表单验证 JavaScript 动画 JavaScript 多媒体 JavaScript 图像映射 JavaScript 浏览器 JavaScript JSON JavaScript 多行字符串 JavaScript 日期格式 JavaScript 获取日期方法 JavaScript 设置日期方法 JavaScript 模块 JavaScript 动态导入 JavaScript BigInt JavaScript Blob JavaScript Unicode JavaScript 浅拷贝 JavaScript 调用堆栈 JavaScript 引用类型 JavaScript IndexedDB JavaScript 点击劫持攻击 JavaScript 柯里化 JavaScript 图形 JavaScript Canvas 画布 JavaScript 防抖 JavaScript 性能 JavaScript 代码风格指南

JavaScript 实用资源

JavaScript 面试题 JavaScript 速查表 JavaScript 函数


JavaScript - 死区

什么是死区?

JavaScript 中的死区是指代码执行过程中变量存在但无法访问的位置。

这是由变量提升行为引起的,该机制在编译期间将变量声明移至其作用域的顶部,同时保持赋值不变。

死区 (DZ) 最常见于使用 let 和 const 声明的变量。Let 和 const 声明属于块级作用域,这意味着它们只能在括号内访问。而变量则不受此限制。

工作原理?

JavaScript 代码执行分为两个阶段:

  • 声明阶段:在声明阶段,所有使用 var、let 或 const 声明的变量都会被初始化。只有 var 变量会被初始化(设置为 undefined),而 let 和 const 变量则处于"暂时死区",直到它们的实际值被赋值。

  • 执行阶段:执行阶段包括为变量赋值并逐行运行代码。

如果在 let 或 const 变量赋值之前尝试使用它,将会收到运行时错误。

变量提升和死区

以下是示例 -

console.log(x); // 这会报错:"初始化之前无法访问'x'"
let x = 5;

执行 console.log(x) 命令时,let 变量 x 已声明但尚未初始化。因此它处于"死区",尝试使用它会导致错误。

这不适用于在声明过程中自动以 undefined 初始化的 var 变量。

发生这种情况的原因是,变量 x 的声明被移到了作用域的顶部,而其初始化仍保留在其原始位置。因此,在提升和实际初始化之间存在一段时间,在此期间访问该变量会导致错误。

let 和 const 的死区

使用 let 和 const 声明的变量的提升方式与使用 var 声明的变量不同。var 会被提升并以 undefined 初始化,而 let 和 const 在声明过程中保持未初始化状态。这种行为会导致这些变量声明出现死区。

console.log(x); // Output: undefined

var x = 42;

在本例中,使用 var 时,x 会被提升并用 undefined 初始化,从而允许在赋值之前访问它。但如果我们将该函数替换为 let 或 const:

console.log(x); // Output: ReferenceError: Cannot access 'x' before initialization

let x = 42;

使用 let 时,x 会被提升但未初始化。在初始化之前尝试访问它会引发 ReferenceError,表明存在死区。

var 的死区

虽然 JavaScript 中的 var 声明与 let 和 const 声明的行为不同,但如果使用不当,它们仍然会产生死区引用。

了解 var 在提升和作用域界定过程中的行为对于准确检测和管理死区至关重要。

使用 var 声明的变量的提升方式与 let 和 const 不同。使用 var 时,声明和初始化都会移至作用域的顶部。然而,在整个提升阶段,变量仍保持未定义状态。

让我们通过以下示例来了解此行为 -

console.log(x); // Output: undefined

var x = 42;

在这种情况下,x 被提升到作用域的顶部,其声明被设置为 undefined。

因此,在实际赋值之前尝试使用 x 将返回 undefined,而不是像 let 和 const 那样抛出 ReferenceError。

处理死区

为避免在代码中发现死区,请遵循以下做法 -

  • 先声明后使用变量: 为避免死区,请始终在变量作用域的开头声明变量。

  • 了解块作用域: 使用 let 和 const 声明的变量属于块作用域,这意味着它们只能在定义它们的块内访问。了解块作用域可以让您更有效地管理变量。

  • 谨慎使用 var: 虽然 var 很少导致死区,但它的作用域限制与 let 和 const 不同。请谨慎并充分了解使用 var 的必要性。

  • 使用代码检查工具:许多代码检查工具可以检测代码中潜在的死区问题,帮助您在开发早期发现这些问题。

减少死区的好处

识别并减少 JavaScript 代码中的死区可以带来诸多好处,从而提高整体代码质量和可维护性 -

  • 预防意外问题:消除死区可以降低出现 ReferenceError 或其他意外运行时问题的可能性,从而使代码行为更可预测,性能更佳。

  • 提高代码可读性:没有死区的代码更易于理解和维护,因为开发人员可以轻松地在整个代码库中思考变量的作用域和初始化。这提高了代码的可读性,并减少了分析或修改代码时的认知压力。

  • 提高调试效率:死区减少后,调试变得更加容易,因为开发人员可以专注于实际问题,而不是纠结于未初始化的变量或错误的变量访问导致的故障。

  • 协作:干净、无死区的代码可以消除对变量作用域和初始化产生误解或误读的可能性,从而促进团队协作。这有助于提高代码审查效率,并使变更更顺畅地集成到代码库中。