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

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

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

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]删除
最新教程 更多>
  • Python高效去除文本中HTML标签方法
    Python高效去除文本中HTML标签方法
    在Python中剥离HTML标签,以获取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...
    编程 发布于2025-04-17
  • 解决MySQL错误1153:数据包超出'max_allowed_packet'限制
    解决MySQL错误1153:数据包超出'max_allowed_packet'限制
    mysql错误1153:故障排除比“ max_allowed_pa​​cket” bytes 更大的数据包,用于面对阴谋mysql错误1153,同时导入数据capase doft a Database dust?让我们深入研究罪魁祸首并探索解决方案以纠正此问题。理解错误此错误表明在导入过程中接...
    编程 发布于2025-04-17
  • Go web应用何时关闭数据库连接?
    Go web应用何时关闭数据库连接?
    在GO Web Applications中管理数据库连接很少,考虑以下简化的web应用程序代码:出现的问题:何时应在DB连接上调用Close()方法?,该特定方案将自动关闭程序时,该程序将在EXITS EXITS EXITS出现时自动关闭。但是,其他考虑因素可能保证手动处理。选项1:隐式关闭终止数...
    编程 发布于2025-04-17
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-04-17
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-04-17
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-04-17
  • 为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    使用php dateTime修改月份:发现预期的行为在使用PHP的DateTime类时,添加或减去几个月可能并不总是会产生预期的结果。正如文档所警告的那样,“当心”这些操作的“不像看起来那样直观。 考虑文档中给出的示例:这是内部发生的事情: 现在在3月3日添加另一个月,因为2月在2001年只有2...
    编程 发布于2025-04-17
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。isement(Isement() trim whitespace whitesp...
    编程 发布于2025-04-17
  • 在C#中如何高效重复字符串字符用于缩进?
    在C#中如何高效重复字符串字符用于缩进?
    在基于项目的深度下固定字符串时,重复一个字符串以进行凹痕,很方便有效地有一种有效的方法来返回字符串重复指定的次数的字符串。使用指定的次数。 constructor 这将返回字符串“ -----”。 字符串凹痕= new String(' - ',depth); console.Wr...
    编程 发布于2025-04-17
  • input: Why Does "Warning: mysqli_query() expects parameter 1 to be mysqli, resource given" Error Occur and How to Fix It?

output: 解决“Warning: mysqli_query() 参数应为 mysqli 而非 resource”错误的解析与修复方法
    input: Why Does "Warning: mysqli_query() expects parameter 1 to be mysqli, resource given" Error Occur and How to Fix It? output: 解决“Warning: mysqli_query() 参数应为 mysqli 而非 resource”错误的解析与修复方法
    mysqli_query()期望参数1是mysqli,resource给定的,尝试使用mysql Query进行执行MySQLI_QUERY_QUERY formation,be be yessqli:sqli:sqli:sqli:sqli:sqli:sqli: mysqli,给定的资源“可能发...
    编程 发布于2025-04-17
  • 如何从Google API中检索最新的jQuery库?
    如何从Google API中检索最新的jQuery库?
    从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本,以前有一种使用特定版本编号的替代方法,它是使用以下语法:获取最新版本:未压缩)While these legacy URLs still remain in use, it is recommended ...
    编程 发布于2025-04-17
  • Python安全插入变量到SQL语句的技巧
    Python安全插入变量到SQL语句的技巧
    在 Python 中将变量插入 SQL 语句 在 Python 中,使用变量执行 SQL 语句时,正确传递变量至关重要,这可以防止潜在的注入攻击并确保正确执行。 为了将变量插入 SQL 语句,请在语句中使用占位符并将变量作为元组传递。例如,考虑以下 Python 代码: cursor.execut...
    编程 发布于2025-04-17
  • Android如何向PHP服务器发送POST数据?
    Android如何向PHP服务器发送POST数据?
    在android apache httpclient(已弃用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    编程 发布于2025-04-17
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-04-17
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-04-17

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

Copyright© 2022 湘ICP备2022001581号-3