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

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

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

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]删除
最新教程 更多>
  • 如何使用“ JSON”软件包解析JSON阵列?
    如何使用“ JSON”软件包解析JSON阵列?
    parsing JSON与JSON软件包 QUALDALS:考虑以下go代码:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    编程 发布于2025-06-09
  • 为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    编程 发布于2025-06-09
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-06-09
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-06-09
  • 如何从PHP中的Unicode字符串中有效地产生对URL友好的sl。
    如何从PHP中的Unicode字符串中有效地产生对URL友好的sl。
    为有效的slug生成首先,该函数用指定的分隔符替换所有非字母或数字字符。此步骤可确保slug遵守URL惯例。随后,它采用ICONV函数将文本简化为us-ascii兼容格式,从而允许更广泛的字符集合兼容性。接下来,该函数使用正则表达式删除了不需要的字符,例如特殊字符和空格。此步骤可确保slug仅包含...
    编程 发布于2025-06-09
  • 如何简化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-06-09
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-06-09
  • CSS可以根据任何属性值来定位HTML元素吗?
    CSS可以根据任何属性值来定位HTML元素吗?
    靶向html元素,在CSS 中使用任何属性值,在CSS中,可以基于特定属性(如下所示)基于特定属性的基于特定属性的emants目标元素: 字体家庭:康斯拉斯(Consolas); } 但是,出现一个常见的问题:元素可以根据任何属性值而定位吗?本文探讨了此主题。的目标元素有任何任何属性值,属...
    编程 发布于2025-06-09
  • 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-06-09
  • 如何同步迭代并从PHP中的两个等级阵列打印值?
    如何同步迭代并从PHP中的两个等级阵列打印值?
    同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时,一个包含country代码的数组,另一个包含乡村代码,另一个包含其相应名称的数组,可能会因不当提供了exply for for for the uncore for the forsion for for ytry...
    编程 发布于2025-06-09
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-06-09
  • Python中何时用"try"而非"if"检测变量值?
    Python中何时用"try"而非"if"检测变量值?
    使用“ try“ vs.” if”来测试python 在python中的变量值,在某些情况下,您可能需要在处理之前检查变量是否具有值。在使用“如果”或“ try”构建体之间决定。“ if” constructs result = function() 如果结果: 对于结果: ...
    编程 发布于2025-06-09
  • Go web应用何时关闭数据库连接?
    Go web应用何时关闭数据库连接?
    在GO Web Applications中管理数据库连接很少,考虑以下简化的web应用程序代码:出现的问题:何时应在DB连接上调用Close()方法?,该特定方案将自动关闭程序时,该程序将在EXITS EXITS EXITS出现时自动关闭。但是,其他考虑因素可能保证手动处理。选项1:隐式关闭终止数...
    编程 发布于2025-06-09
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-06-09
  • 如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解决方案: args)抛出异常{ 日历cal = calendar.getInstance(); SimpleDateFormat SDF =新的SimpleDateFormat(“...
    编程 发布于2025-06-09

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

Copyright© 2022 湘ICP备2022001581号-3