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

---

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

---

---

---

💯前言

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

---

💯提升（Hoisting）概述

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

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

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

---

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

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

• 函数声明：函数声明会在编译阶段被完整提升到作用域的最顶端，包括函数的函数体在内。因此，函数可以在其声明之前调用。这种行为赋予了开发者很大的灵活性，尤其是在编写递归函数或将函数作为回调时，可以确保函数在作用域中的可见性和可调用性。

• var 变量声明：var 声明的提升仅限于声明部分，而赋值部分不会被提升。这意味着在作用域的最顶端，变量会被默认初始化为 undefined，直到代码执行到赋值语句时，变量的值才会被真正更新。因此，var 提升后的行为往往会导致一些令人困惑的未定义状态。

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

---

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

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

console.log(foo);  // 输出函数 foo 的定义function foo() {console.log("Hello, World!");
}var foo = 10;console.log(foo);  // 输出 10

---

提升后的代码解析

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

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 变量声明同名时，函数声明会优先于变量声明被提升，且变量声明不会覆盖函数声明。然而，变量的赋值操作会在执行阶段覆盖函数的定义，这可能导致函数无法再被调用。

例如：

function x() {x = 20;
}var x;console.log(x);  // 输出函数 x 的定义x = 10;console.log(x);  // 输出 10x();  // 报错：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。

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

---

💯变量声明的不同类型——var、let 和 const 的提升行为

---

let 和 const 的行为

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

例如：

console.log(a);  // 抛出 ReferenceError
let a = 10;

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

---

为什么使用 let 和 const 更安全

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

---

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

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

---

常见陷阱

1. 变量提升导致的 undefined 错误

   • 使用 var 声明的变量在提升后会被初始化为 undefined，因此在赋值之前访问它们会返回 undefined。这种行为可能导致程序意外地处理未定义的值，产生难以察觉的 bug。

   console.log(b);  // 输出 undefined
   var b = 20;
   

2. 函数和变量同名时的混淆

   • 当函数和变量同名时，变量的赋值操作会覆盖函数的定义，这导致后续对该函数的调用会失败。

   function example() {console.log("I am a function");
   }var example = 10;example();  // 抛出 TypeError: example is not a function
   

3. let 和 const 的暂时性死区（TDZ）

   • 当使用 let 和 const 声明变量时，变量在实际赋值之前处于 TDZ 中，访问这些变量会导致 ReferenceError，这可能会让开发者感到困惑。

   console.log(c);  // 抛出 ReferenceError
   let c = 30;
   

---

最佳实践

1. 避免使用 var

   • 使用 let 和 const 来代替 var，从而避免由于变量提升和初始化为 undefined 导致的错误。

2. 保持函数与变量名称的唯一性

   • 为了避免函数和变量的命名冲突，尽量保持函数和变量具有唯一的名称，以免产生意外的覆盖行为。

3. 将变量声明放在靠近使用的地方

   • 避免将变量声明分散在代码的不同部分，而是将变量声明靠近其首次使用的位置，以增加代码的可读性和维护性。

4. 了解提升机制

   • 深入理解 JavaScript 提升机制可以帮助开发者编写更加可预测和稳定的代码，减少因提升导致的未定义行为。

5. 提前声明并初始化变量

   • 在适当的位置声明并初始化变量，确保变量在使用之前已经被赋予正确的值，以减少提升机制带来的混淆。

6. 小心使用 let 和 const 的暂时性死区

   • 在使用 let 和 const 时，要特别注意它们的 TDZ 行为，确保在变量声明和赋值之后再进行访问。

---

💯小结

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

• 为了最大程度地减少因提升带来的问题，建议开发者尽量使用 let 和 const，并确保函数和变量之间没有命名冲突。通过掌握提升机制的详细原理和行为，开发者可以更好地控制代码的执行顺序，编写出更加可靠和高效的 JavaScript 程序。

• 提升机制是 JavaScript 的独特特性之一，它深刻体现了这门语言的动态性与灵活性。理解并正确应用这一特性，不仅有助于开发者更好地编写代码，也有助于增强团队协作时代码的质量与一致性。通过持续的实践和深入学习，开发者可以熟练掌握提升机制，从而避免潜在的错误，编写出健壮、高效且可维护的 JavaScript 应用程序。

---

---