”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 了解 JavaScript 中的提升:综合指南

了解 JavaScript 中的提升:综合指南

发布于2024-11-05
浏览:187

Understanding Hoisting in JavaScript: A Comprehensive Guide

JavaScript 中的提升

提升是一种行为,其中变量和函数声明在之前被移动(或“提升”)到其包含范围(全局范围或函数范围)的顶部代码被执行。这意味着您可以在代码中实际声明变量和函数之前使用它们。

变量提升

变量

  • 用 var 声明的变量被提升到其作用域的顶部,但它们的值直到代码中发生赋值的点才被初始化。
console.log(x); // undefined
var x = 5;
console.log(x); // 5

让和常量

  • 用 let 和 const 声明的变量也会被提升,但会被放置在“临时死区”中,直到到达它们的声明为止。在声明之前访问它们将导致引用错误。
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

函数提升

传统功能

  • 函数声明被完全提升,这意味着声明和函数体都被移动到作用域的顶部。这允许您在代码中声明函数之前调用该函数。
sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}
  • 相反,函数表达式(其中将函数分配给变量)仅作为变量提升,因此在初始化变量之前调用它们将导致未定义或类型错误。
greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

箭头功能

  • 相反,函数表达式(其中将函数分配给变量)仅作为变量提升,因此在初始化变量之前调用它们将导致未定义或类型错误。
greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

暂时死区 (TDZ)

临时死区 (TDZ) 对于使用 let 和 const 声明的变量存在,因为 JavaScript 旨在防止您在声明和初始化这些变量之前访问它们。

为什么 var 和 let、const 在提升中表现不同

  • 这是因为JavaScript的历史演变。
  • 最初,JavaScript 是为非开发人员的用户设计的,JavaScript 的主要核心用途是向网页添加小型交互元素。
  • 所以 var 仅支持函数作用域。同样在那个时候,还没有块作用域。
  • 但是在 JavaScript 的后期发展中,使用 var 和修复 bug 变得更加复杂。
  • 因此,为了使 JavaScript 与其他现代语言竞争,添加了更多功能,如 let、const、箭头函数、ES6 方法等。

为什么 var 不像 let 和 const 那样更新

  • 这是因为向后兼容。
  • 当时,JavaScript被许多企业广泛使用,因此更新或更改现有功能会导致代码库的破坏。
  • 因此,单独添加了现代功能。

常见面试问题

  • JavaScript 中什么是提升?
  • JavaScript 中什么是提升的,什么不是?
  • var、let 和 const 在提升方面有什么区别?
  • JavaScript 中的临时死区 (TDZ) 是什么?
  • 您能解释一下使用函数声明与函数表达式进行提升吗?
  • ES6模块中的提升是什么?
  • 为什么我们应该避免在现实代码中依赖提升?

概括

  • 提升是 JavaScript 中的默认行为,其中变量和函数声明在编译阶段被移动到各自作用域的顶部。
  • 提升仅适用于使用 var 和传统函数声明的变量,不适用于 let、const 和箭头函数。
  • 只有函数声明被提升,所以传统函数可以工作,但如果函数被分配给变量,则在定义之前它是不可调用的。
  • 之所以var和传统函数被提升,而let、const和箭头函数没有被提升,是因为在初期,JavaScript主要用于小型UI交互。
  • 但后来,随着 JavaScript 被广泛用于企业构建应用程序,仅在全局范围内修复错误变得更加困难。
  • 因此,在未来的更新中,会解决更多安全问题。
  • 此外,更新现有功能会破坏代码库,因此单独添加新功能。
版本声明 本文转载于:https://dev.to/nishanthank/understanding-hoisting-in-javascript-a-comprehensive-guide-5bic?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在gRPC中实现服务器到客户端的广播?
    如何在gRPC中实现服务器到客户端的广播?
    gRPC 中的广播:服务器到客户端通信建立 gRPC 连接时,通常需要将事件或更新从服务器广播到客户端连接的客户端。为了实现这一点,可以采用各种方法。Stream Observables一种常见的方法是利用服务器端流。每个连接的客户端都与服务器建立自己的流。然而,直接订阅其他服务器客户端流是不可行的...
    编程 发布于2024-11-05
  • 为什么填充在 Safari 和 IE 选择列表中不起作用?
    为什么填充在 Safari 和 IE 选择列表中不起作用?
    在 Safari 和 IE 的选择列表中不显示填充尽管 W3 规范中没有限制,但 WebKit 浏览器不支持选择框中的填充,包括Safari 和 Chrome。因此,这些浏览器中不应用填充。要解决此问题,请考虑使用 text-indent 而不是 padding-left。通过相应增加选择框的宽度来...
    编程 发布于2024-11-05
  • 在 Spring Boot 中创建自定义注释的终极指南
    在 Spring Boot 中创建自定义注释的终极指南
    Such annotations fill the entire project in Spring Boot. But do you know what problems these annotations solve? Why were custom annotations introduce...
    编程 发布于2024-11-05
  • 为什么 Elixir 在异步处理方面比 Node.js 更好?
    为什么 Elixir 在异步处理方面比 Node.js 更好?
    简单回答:Node.js 是单线程的,并拆分该单线程来模拟并发,而 Elixir 利用了 Erlang 虚拟机 BEAM 原生的并发和并行性,同时执行进程。 下面,我们将更深入地了解这种差异,探索两个关键概念:Node.js 事件循环和 Elixir 的 BEAM VM 和 OTP。这些元素对于理解...
    编程 发布于2024-11-05
  • AngularJS $watch 如何替代动态导航高度调整中的计时器?
    AngularJS $watch 如何替代动态导航高度调整中的计时器?
    避免 AngularJS 的高度监视计时器当导航高度是动态时,AngularJS 程序员经常面临响应式导航的挑战。这就导致需要调整内容的 margin-top 值以响应导航高度的变化。以前,使用计时器来检测导航高度的变化,但这种方法有缺点:使用计时器和调整内容的 margin-top 出现延迟。幸运...
    编程 发布于2024-11-05
  • 从零到 Web 开发人员:掌握 PHP 基础知识
    从零到 Web 开发人员:掌握 PHP 基础知识
    掌握PHP基础知识至关重要:安装PHP创建PHP文件运行代码理解变量和数据类型使用表达式和运算符创建实际项目以提高技能PHP开发入门:掌握PHP基础PHP是一种用途广泛、功能强大的脚本语言,用于创建动态且交互式Web应用程序。对于初学者来说,掌握PHP的基本知识至关重要。一、安装PHP在本地开发机器...
    编程 发布于2024-11-05
  • 缓冲区:Node.js
    缓冲区:Node.js
    Node.js 中缓冲区的简单指南 Node.js 中的 Buffer 用于处理原始二进制数据,这在处理流、文件或网络数据时非常有用。 如何创建缓冲区 来自字符串: const buf = Buffer.from('Hello'); 分配特定大小的Buffer...
    编程 发布于2024-11-05
  • 掌握 Node.js 中的版本管理
    掌握 Node.js 中的版本管理
    作为开发者,我们经常遇到需要不同 Node.js 版本的项目。对于可能不经常参与 Node.js 项目的新手和经验丰富的开发人员来说,这种情况都是一个陷阱:确保每个项目使用正确的 Node.js 版本。 在安装依赖项并运行项目之前,验证您的 Node.js 版本是否匹配或至少兼容项目的要求至关重要。...
    编程 发布于2024-11-05
  • 如何在 Go 二进制文件中嵌入 Git 修订信息以进行故障排除?
    如何在 Go 二进制文件中嵌入 Git 修订信息以进行故障排除?
    确定 Go 二进制文件中的 Git 修订版部署代码时,将二进制文件与构建它们的 git 修订版关联起来会很有帮助排除故障的目的。然而,直接使用修订号更新源代码是不可行的,因为它会改变源代码。解决方案:利用构建标志解决此挑战的方法包括利用构建标志。通过使用构建标志在主包中设置当前 git 修订版的版本...
    编程 发布于2024-11-05
  • 常见 HTML 标签:视角
    常见 HTML 标签:视角
    HTML(超文本标记语言)构成了 Web 开发的基础,是互联网上每个网页的结构。通过了解最常见的 HTML 标签及其高级用途,到 2024 年,开发人员可以创建更高效​​、更易于访问且更具视觉吸引力的网页。在这篇文章中,我们将探讨这些 HTML 标签及其最高级的用例,以帮助您提高 Web 开发技能。...
    编程 发布于2024-11-05
  • CSS 媒体查询
    CSS 媒体查询
    确保网站在各种设备上无缝运行比以往任何时候都更加重要。随着用户通过台式机、笔记本电脑、平板电脑和智能手机访问网站,响应式设计已成为必要。响应式设计的核心在于媒体查询,这是一项强大的 CSS 功能,允许开发人员根据用户设备的特征应用不同的样式。在本文中,我们将探讨什么是媒体查询、它们如何工作以及实现它...
    编程 发布于2024-11-05
  • 了解 JavaScript 中的提升:综合指南
    了解 JavaScript 中的提升:综合指南
    JavaScript 中的提升 提升是一种行为,其中变量和函数声明在之前被移动(或“提升”)到其包含范围(全局范围或函数范围)的顶部代码被执行。这意味着您可以在代码中实际声明变量和函数之前使用它们。 变量提升 变量 用 var 声明的变量被提升到其作...
    编程 发布于2024-11-05
  • 将 Stripe 集成到单一产品 Django Python 商店中
    将 Stripe 集成到单一产品 Django Python 商店中
    In the first part of this series, we created a Django online shop with htmx. In this second part, we'll handle orders using Stripe. What We'll...
    编程 发布于2024-11-05
  • 在 Laravel 中测试排队作业的技巧
    在 Laravel 中测试排队作业的技巧
    使用 Laravel 应用程序时,经常会遇到命令需要执行昂贵任务的情况。为了避免阻塞主进程,您可能决定将任务卸载到可以由队列处理的作业。 让我们看一个例子。想象一下命令 app:import-users 需要读取一个大的 CSV 文件并为每个条目创建一个用户。该命令可能如下所示: /* Import...
    编程 发布于2024-11-05
  • 如何创建人类水平的自然语言理解 (NLU) 系统
    如何创建人类水平的自然语言理解 (NLU) 系统
    Scope: Creating an NLU system that fully understands and processes human languages in a wide range of contexts, from conversations to literature. ...
    编程 发布于2024-11-05

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

Copyright© 2022 湘ICP备2022001581号-3