Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【前端】JavaScript 变量声明与函数声明的提升机制:深入探讨提升优先级与其行为

【前端】JavaScript 变量声明与函数声明的提升机制:深入探讨提升优先级与其行为

作者头像
CSDN-Z
发布于 2025-06-02 02:12:17
发布于 2025-06-02 02:12:17
10000
代码可运行
举报
文章被收录于专栏:AIGCAIGC
运行总次数:0
代码可运行

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

💯前言

  • JavaScript 编程语言中,提升(hoisting)是一个关键的编译特性,它深刻影响代码的行为,直接影响到变量和函数的可见性和可用性。作为 JavaScript 编译与执行过程的重要组成部分,理解提升机制对于编写正确且高效的代码至关重要。尤其是在编写复杂应用时,这一概念的掌握有助于避免潜在的错误,并确保程序逻辑的明确性和可预测性。 本文旨在对 JavaScript 提升机制进行详细探讨,特别是关于变量声明var)和函数声明提升优先级,以及两者之间的复杂关系。我们将通过深入的分析代码示例,系统揭示提升机制的行为模式及其背后的原理JavaScript

💯提升(Hoisting)概述

提升(Hoisting)JavaScript 编译阶段的行为,它涉及到将代码中的变量声明函数声明提升到所在作用域全局作用域的最顶端。这意味着在代码执行之前,JavaScript 引擎会对代码进行预处理,使得这些声明可以在其实际声明之前访问。通俗地说,JavaScript 在编译时会扫描整个作用域,将变量和函数的声明部分提前处理。

这种提升带来的效果使得在代码的任何位置都能够访问变量和函数,甚至是在它们的实际声明之前,从而形成了**“提前可用”的特性。这种机制为 JavaScript 提供了灵活性**,但也带来了代码可读性调试上的挑战,特别是在同名变量和函数存在时,可能会引入意料之外的行为。因此,理解提升的具体原理及其对代码的影响是开发人员的基本功

在进一步探讨提升机制之前,有必要明确 JavaScript 中三种主要的声明方式varletconst,它们在提升时有着显著的差异。此外,函数声明函数表达式在提升方面也表现出不同的行为模式。本文将聚焦于 var 和函数声明的提升,解析它们的优先级及相互关系


💯提升机制——函数声明 vs 变量声明

在 JavaScript 中,函数和变量的声明都会被提升,但它们的提升方式和处理规则并不相同。

  • 函数声明:函数声明会在编译阶段被完整提升到作用域的最顶端,包括函数的函数体在内。因此,函数可以在其声明之前调用。这种行为赋予了开发者很大的灵活性,尤其是在编写递归函数或将函数作为回调时,可以确保函数在作用域中的可见性和可调用性。
  • var 变量声明var 声明的提升仅限于声明部分,而赋值部分不会被提升。这意味着在作用域的最顶端,变量会被默认初始化为 undefined,直到代码执行到赋值语句时,变量的值才会被真正更新。因此,var 提升后的行为往往会导致一些令人困惑的未定义状态。

通过下面的代码示例,我们可以更好地理解函数声明与 var 声明的提升效果及其相对优先级。


💯代码示例:函数与 var 的提升

以下代码展示了涉及函数声明和 var 声明的提升过程,展示了函数优先于变量的提升优先级:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(foo);  // 输出函数 foo 的定义

function foo() {
  console.log("Hello, World!");
}

var foo = 10;

console.log(foo);  // 输出 10

提升后的代码解析

在上面的代码中,JavaScript 引擎在编译阶段对代码进行了提升,提升后的代码等效于:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function foo() {
  console.log("Hello, World!");
}

var foo;

console.log(foo);  // 输出函数 foo 的定义

foo = 10;

console.log(foo);  // 输出 10

分析

  • 在编译阶段,函数声明 function foo() 会被提升到作用域的最顶端,因此在代码执行之前,函数 foo 已经在当前作用域内被定义,并且可以在 console.log(foo) 之前使用。
  • 接下来,var foo 的声明也被提升,但它仅仅是声明变量,而不会覆盖函数声明,因此在编译结束时,foo 仍然是指向函数的引用。
  • 执行代码时,第一次 console.log(foo) 输出的是函数 foo 的定义。
  • 随后,当 foo 被赋值为 10 后,再次调用 console.log(foo),这时输出的就是 10

💯同名函数和变量声明的行为

当函数声明和 var 变量声明同名时,函数声明会优先于变量声明被提升,且变量声明不会覆盖函数声明。然而,变量的赋值操作会在执行阶段覆盖函数的定义,这可能导致函数无法再被调用。

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function x() {
  x = 20;
}

var x;

console.log(x);  // 输出函数 x 的定义

x = 10;

console.log(x);  // 输出 10

x();  // 报错:TypeError: x is not a function

提升过程与执行分析

  1. 提升阶段
    • 函数 x 的声明会被提升到作用域的最顶端,因此在编译阶段,x 被初始化为一个函数。
    • 紧接着,var x 的声明也被提升,但它不会覆盖已经存在的函数定义,只是做了一个声明。
  2. 执行阶段
    • 第一次 console.log(x) 输出的是函数 x,因为此时 x 的值为函数。
    • x = 10 赋值后,x 的引用被修改为数字 10,因此覆盖了之前的函数定义。
    • 最后,当尝试调用 x() 时,由于 x 现在是一个数字而不是函数,因此抛出 TypeError: x is not a function

💯为什么函数声明的提升优先于变量声明?

函数声明的提升优先于变量声明的原因与 JavaScript 的执行模型息息相关。在 JavaScript 中,代码的执行分为编译阶段执行阶段。在编译阶段,JavaScript 引擎会进行词法分析,将所有的函数声明完整地提升到作用域的最顶端,确保它们在执行阶段可以被调用。

相比之下,var 声明在编译时也会被提升,但初始化部分会保留在原始位置。因此,在赋值之前,变量的初始值是 undefined

这种机制的设计使得函数在作用域内具有更高的优先级,从而确保开发者可以在代码的任何位置调用函数。这种灵活性对于编写结构化代码至关重要,但同时也要求开发者更小心谨慎,以免变量声明和函数声明的混合使用导致不可预料的行为


💯变量声明的不同类型——varletconst 的提升行为


letconst 的行为

var 声明不同,letconst 的提升行为更加严格。虽然 letconst 也会被提升,但它们在赋值之前处于暂时性死区(Temporal Dead Zone, TDZ)。在 TDZ 中访问这些变量会抛出 ReferenceError,这是为了确保变量在实际赋值之前不会被访问,从而避免未定义行为。

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(a);  // 抛出 ReferenceError
let a = 10;

在这个例子中,a 虽然被提升,但由于在赋值前处于 TDZ,因此访问会导致 ReferenceError。这种行为使得 letconst 更加安全,防止在变量未被正确初始化之前对其进行访问。


为什么使用 letconst 更安全

letconst 相比于 var 提供了更加安全和合理的变量管理方式。首先,letconst 不会被初始化为 undefined,而是要求在赋值后才可以使用,这有效避免了许多常见的未定义错误。其次,TDZ 的存在使得这些变量在声明之前是不可访问的,这可以强制开发者遵循正确的变量声明和赋值顺序,增强代码的可读性和健壮性。


💯提升机制中的常见陷阱与最佳实践

理解提升机制的工作原理,有助于开发者识别并避免在 JavaScript 中的一些常见陷阱。以下列出了一些常见的陷阱以及相应的最佳实践,以帮助开发者编写更可靠的代码。


常见陷阱

变量提升导致的 undefined 错误

  • 使用 var 声明的变量在提升后会被初始化为 undefined,因此在赋值之前访问它们会返回 undefined。这种行为可能导致程序意外地处理未定义的值,产生难以察觉的 bug。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(b);  // 输出 undefined
var b = 20;

函数和变量同名时的混淆

  • 当函数和变量同名时,变量的赋值操作会覆盖函数的定义,这导致后续对该函数的调用会失败。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function example() {
  console.log("I am a function");
}

var example = 10;

example();  // 抛出 TypeError: example is not a function

letconst 的暂时性死区(TDZ)

  • 当使用 letconst 声明变量时,变量在实际赋值之前处于 TDZ 中,访问这些变量会导致 ReferenceError,这可能会让开发者感到困惑。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(c);  // 抛出 ReferenceError
let c = 30;

最佳实践

  1. 避免使用 var
    • 使用 letconst 来代替 var,从而避免由于变量提升和初始化为 undefined 导致的错误。
  2. 保持函数与变量名称的唯一性
    • 为了避免函数和变量的命名冲突,尽量保持函数和变量具有唯一的名称,以免产生意外的覆盖行为。
  3. 将变量声明放在靠近使用的地方
    • 避免将变量声明分散在代码的不同部分,而是将变量声明靠近其首次使用的位置,以增加代码的可读性和维护性。
  4. 了解提升机制
    • 深入理解 JavaScript 提升机制可以帮助开发者编写更加可预测和稳定的代码,减少因提升导致的未定义行为。
  5. 提前声明并初始化变量
    • 在适当的位置声明并初始化变量,确保变量在使用之前已经被赋予正确的值,以减少提升机制带来的混淆。
  6. 小心使用 letconst 的暂时性死区
    • 在使用 letconst 时,要特别注意它们的 TDZ 行为,确保在变量声明和赋值之后再进行访问。

💯小结

JavaScript 中的提升机制是一个重要且复杂的概念,理解函数声明与变量声明的提升优先级对于避免代码中的潜在错误至关重要。提升机制使得函数声明在变量声明之前被提升,而 var 声明的变量只会在作用域中被初始化为 undefined,并在代码执行阶段完成赋值。因此,理解这些细节可以帮助开发者编写出更为稳定、健壮和易于维护的代码。

  • 为了最大程度地减少因提升带来的问题,建议开发者尽量使用 letconst,并确保函数和变量之间没有命名冲突。通过掌握提升机制的详细原理和行为,开发者可以更好地控制代码的执行顺序,编写出更加可靠和高效的 JavaScript 程序。
  • 提升机制是 JavaScript 的独特特性之一,它深刻体现了这门语言的动态性与灵活性。理解并正确应用这一特性,不仅有助于开发者更好地编写代码,也有助于增强团队协作时代码的质量与一致性。通过持续的实践和深入学习,开发者可以熟练掌握提升机制,从而避免潜在的错误,编写出健壮、高效且可维护的 JavaScript 应用程序。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《你不知道的JavaScript》读书笔记(一)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/54291439
大黄大黄大黄
2018/09/14
4480
《你不知道的JavaScript》读书笔记(一)
JS学习系列 04 - 提升
到目前为止,大家应该很熟悉作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将属于这个作用域。
leocoder
2019/07/09
4080
提升
到现在,我们已经明白作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将附属于这个作用域。
Karl Du
2020/10/23
4090
JS学习系列 04 - 提升
到目前为止,大家应该很熟悉作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将属于这个作用域。
leocoder
2024/01/28
1310
13 - JavaScript 中的提升
原文地址:https://dev.to/bhagatparwinder/hoisting-in-javascript-2aj2
前端黑板报
2022/12/01
3250
【前端】JavaScript 变量声明与函数提升例题分析:深入理解变量提升、作用域链与函数调用
在 JavaScript 执行代码之前,会先进行 预解析 ,把变量和函数声明提升到当前作用域的顶部。在这段代码中,我们有两个作用域需要考虑: 全局作用域 和 函数作用域 fn 。
CSDN-Z
2024/11/26
1670
【前端】JavaScript 变量声明与函数提升例题分析:深入理解变量提升、作用域链与函数调用
《你不知道的JavaScript》-- 作用域(笔记)
将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树(Abstract Syntax Tree,AST,抽象语法树)。
爱学习的程序媛
2022/04/07
7490
《你不知道的JavaScript》-- 作用域(笔记)
函数与变量的优先级
我们之前说过变量声明会出现变量提升的情况,这个问题说的已经很多了,但是我还是想在啰嗦一下。直觉上我们都会认为 JavaScript 是单线程语言,代码在执行时是由上到下一行一行执行的。但实际上这并不完全 正确,有一种特殊情况会导致这个假设是错误的,这种特殊情况不包括异步。
OECOM
2020/07/02
7930
函数与变量的优先级
变量提升
Hoisting(变量提升)是 JavaScript 中的一种行为,它在编译阶段将变量和函数声明提升到其所在作用域的顶部。这意味着,无论声明出现在代码的哪个位置,它们都被实际上移动到其所在作用域的顶部,使其能够在代码中实际放置之前就可以使用。
泽霖
2023/12/12
2381
javascript变量提升详解
对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解。所以在此,我想来讲一讲。
嘿嘿嘿
2018/09/10
4450
《你不知道的JavaScript》:作用域提升
所谓声明,包括变量声明和函数声明。而声明提升,就是在作用域范围内,不管内部的变量与函数声明在何处,当执行到这个作用域时,引擎都会首先将当前作用域内的变量和函数声明放置到当前作用域顶端后,再按从上到下顺序执行其他代码。举例:
前端_AWhile
2019/08/29
6630
揭秘变量提升
“Global prop.”表示一个在 script 中的声明,当全局作用域中被执行时,是否会向全局对象添加属性。
前端小智@大迁世界
2019/07/08
7400
谈谈 JavaScript 中的 TDZ
本来过年期间想写这个的,不过要准备些东西,一直没抽出时间,刚好今天有点空闲。上个月阮一峰阮老师在微博上发布了这样一条信息 于是评论区炸开了锅,很多人留言指出,这是 TDZ。 TDZ 全名 Temporal Dead Zone,翻译过来就是暂时性死区。今天就简单谈一下,我运行代码的环境是 node 6.9.1 。 JS 中的变量提升 我们都知道,在 JS 中,使用 var 声明的变量会被提升(Hosting),也就是不管你在什么地方写的 var,都会把其提升到作用域最开头。比如: x = 5; console
Bob.Chen
2018/04/27
1.5K0
Conscript_const let var
ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
全栈程序员站长
2022/09/19
4340
【前端】JavaScript作用域与预解析:深入理解问题与解答
在 JavaScript 中,函数声明的提升优先于变量声明。这意味着函数会被完整地提升到作用域的顶部,并且在变量声明之前可以使用。但变量声明只会被提升声明,赋值操作仍然保留在原地。
CSDN-Z
2024/11/26
1510
【前端】JavaScript作用域与预解析:深入理解问题与解答
JavaScript深度剖析之变量、函数提升:从表面到本质
Immerse
2024/03/13
1860
JavaScript深度剖析之变量、函数提升:从表面到本质
JavaScript 提升不完全指北
很多人会认为是 undefined , 因为 var a 声明在 a = 2 之后, 他们自然而然地认为变量被重新赋值了, 因此会被赋予默认值 undefined。但是, 真正的输出结果是 2。
撸码那些事
2019/08/06
4930
JavaScript 变量提升
变量提升是一个将变量声明或者函数声明提升到作用域起始处的过程,即变量声明 var 和函数声明 function fun() {..} 在会发生变量提升过程。
用户1065635
2019/03/21
9790
JavaScript 变量提升
JavaScript执行机制:变量提升、作用域链、词法作用域、块级作用域、闭包和this
所以,JavaScript是ArkTS的基础,本文就来介绍一下JavaScript执行机制的一些核心概念。
陆业聪
2024/07/23
2670
JavaScript执行机制:变量提升、作用域链、词法作用域、块级作用域、闭包和this
函数声明与函数表达式
定义一个函数的方法主要有三种 函数声明、函数表达式、new Function构造函数,函数声明与函数表达式定义的函数较为常用,构造函数的方式可以将字符串定义为函数。
WindRunnerMax
2020/08/27
6140
相关推荐
《你不知道的JavaScript》读书笔记(一)
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档