JavaScript 为什么会存在 hoisting

JavaScript 中的提升（hoisting） 是一种行为，该行为将变量和函数声明在编译阶段移至其所在作用域顶部、它使得在声明之前就可以使用函数和变量、这种特性允许我们的代码拥有更灵活的结构，尽管它也可能导致一些难以察觉的错误。具体来说，函数声明会被完整地提升，而变量声明仅提升其声明，不提升赋值的部分。

例如，函数提升允许我们在一个函数体内在定义函数下方调用该函数。这让代码的结构更为灵活，不过，过度依赖 hoisting 可能会让代码的逻辑变得难以理解，尤其是在一个作用域中声明了多个变量和函数时，代码执行的实际顺序与书写顺序不一致可能导致错误。了解提升机制可以帮助开发者更好地组织和逻辑化代码结构。

一、变量的提升

在JavaScript中，使用 var 关键字声明的变量会发生提升。这意味着在编译阶段，变量的声明部分会被移动到其作用域的顶部，然而此时的变量仅被声明，并没有被初始化。变量的初始化会保留在原来的位置，导致在变量声明前的访问会得到 undefined。

变量声明提升的后果 是代码的执行结果可能会与直观理解不同。例如，若在一个变量被声明和初始化之前尝试访问它，会返回 undefined 而非抛出错误。这种行为在调试时可能会造成困扰，因为它隐藏了变量尚未声明的问题。

二、函数的提升

与变量不同，函数声明会被完整地提升 到其作用域顶部。这意味着函数可以在声明之前被调用，这对于代码的组织结构具有一定的灵活性。不过，这样的特性只适用于函数声明，而不适用于函数表达式。即如果使用函数表达式，就不能实现函数的提升了。

函数声明与函数表达式的区别 在于它们的提升行为。函数声明总是会被整体提升，而函数表达式则遵循着变量提升的规则。因此，将函数作为表达式赋值给变量时，只有变量名会被提升，实际的函数体则不会，这可能导致在函数未赋值之前尝试调用它时出现错误。

三、提升的例子和注意事项

考虑到提升可能带来的困扰，最好的做法是在函数或变量使用前明确地声明它们，从而避免任何由于提升所造成可能发生的逻辑错误或难以追踪的bugs。

在实践中，使用 let 和 const 进行变量声明是减少 hoisting 副作用的现代方法。这些ES6新增的关键字提供了块级作用域，并避免了变量提升。虽然它们仍然存在暂时性死区（Temporal Dead Zone – 简称TDZ），但这正是一种让提升更加可控和可预见的机制。

四、ES6以后的变化

ES6标准引入了 let 和 const 用于变量声明，与 var 有本质的不同。使用 let 和 const 声明的变量不会在编译阶段进行提升，这使得代码更易读、更容易维护。它们被提升到了块顶部，而不是整个函数或全局作用域的顶部，这使得它们的作用域更容易控制，而且在访问这些变量前，代码会抛出引用错误，因为它们位于TDZ中。

五、好的编码习惯

为了写出更可靠、更容易维护的代码，遵循一些好的编码习惯至关重要。一般建议将所有的函数和变量声明放在其作用域的顶部，这样做即使在不使用 let 和 const 的旧版JavaScript环境中也能模拟块级作用域，减少因为 hoisting 导致的问题。

有意识地组织代码，尽量避免不必要的全局变量声明，使用函数封装来限制局部变量的作用域，并总是声明依赖，这样可以使得代码的执行流程更加清晰和可预测。而且在使用函数之前，先进行声明，不仅遵循了提升规则，也使得代码的可读性和可维护性得到提升。

六、总结

JavaScript 的提升是对新手来说可能非常迷惑的特性。它允许我们在代码中使用函数和变量，即使在我们声明它们之前。然而，了解 hoisting 的细节对写出健壮、易于维护的代码至关重要。使用ES6的 let、const 可以减少 hoisting 带来的意外情况，这是现代 JavaScript 开发的推荐做法。通过良好的代码组织习惯和对 hoisting 行为的理解，我们可以写出更清晰、更健壮且更加有效的JavaScript代码。

相关问答FAQs：

为什么 JavaScript 中会有 hoisting 这个特性存在？

JavaScript 中存在 hoisting 这个特性的原因是为了提高代码的可读性和易用性。通过将变量和函数的声明提升到作用域的顶部，可以让代码中的调用和赋值语句与它们的声明语句分离开来，使得代码更加直观和易于理解。

hoisting 在 JavaScript 中是如何工作的？

当 JavaScript 解析器遇到一个函数声明或者变量声明时，会将这些声明提升到当前作用域的顶部。这意味着你可以在声明之前使用这些函数或者变量，虽然它们的定义实际上是在后面才出现的。

例如：

console.log(x); // 输出 undefined
var x = 10;

hoisted();
function hoisted() {
  console.log('Called hoisted function');
}

上述代码中，虽然变量 x 的声明在输出语句之后，但由于 hoisting 的存在，JavaScript 解析器会将变量 x 的声明提升到作用域顶部，所以输出的结果是 undefined。

在编写 JavaScript 代码时，如何利用 hoisting 这个特性？

利用 hoisting 这个特性，你可以更加灵活地组织你的代码。可以将函数的声明放在使用它们的位置之后，或者将变量的声明放在使用它们的位置之前，而不会导致出错。

然而，虽然 hoisting 可以让你在代码的任何位置都能访问变量和函数，但这并不意味着你应该滥用它。为了保持代码的可读性和维护性，建议还是将声明语句放置在代码的开头，这样可以更清晰地表达代码的意图。