ES6 的秘密武器：块级作用域中函数声明的妙用

自 ES6 横空出世，JavaScript 的格局发生了翻天覆地的变化。其中，块级作用域的引入可谓是 JavaScript 进化史上的里程碑。块级作用域赋予了我们更精细的代码组织能力，也带来了一些意想不到的微妙变化，尤其是当我们使用函数声明时。

之前，JavaScript 中并不存在块级作用域，只有函数作用域。这意味着，任何在函数内部声明的变量或函数都可以从函数外部访问。这种机制虽然简洁方便，但在大型项目中很容易造成命名冲突和作用域污染。

ES6 引入了块级作用域，为我们提供了更精细的代码组织能力。使用花括号 {} 即可创建一个块级作用域，在这个作用域内声明的变量或函数只在这个块级范围内有效。这极大地提高了代码的可读性和可维护性。

然而，当我们使用函数声明时，块级作用域会带来一些有趣的变化。让我们看看以下代码：

{
  function foo() {
    console.log("里面");
  }
  foo(); // 输出: 里面

  console.log(foo); // 输出: undefined
}

foo(); // 输出: 外面

这段代码中，我们定义了一个块级作用域，并在其中声明了一个函数 foo().

乍一看，这似乎是合理的。我们在块级作用域内声明了一个函数，并且可以在该块级范围内调用它。然而，当我们试图在块级作用域之外调用 foo() 时，却得到了一个 undefined 的输出。这是因为函数声明在 ES6 中被提升到了块级作用域的顶部。这意味着，即使函数声明在块级作用域的底部，它仍然可以在块级作用域的任何地方访问。

但是，函数声明提升后，它的作用域仍然是块级作用域。这意味着，当我们尝试在块级作用域之外调用 foo() 时，它找不到这个函数，从而导致 undefined 的输出。

值得注意的是，这种情况只适用于函数声明。如果我们使用函数表达式来声明函数，则函数的作用域将是块级作用域，并且不会提升到块级作用域的顶部。

{
  const foo = function() {
    console.log("里面");
  }
  foo(); // 输出: 里面

  console.log(foo); // 输出: function() { ... }
}

foo(); // 报错: foo is not defined

在上面的代码中，我们使用函数表达式声明了函数 foo(). 由于函数表达式不会被提升，因此它只能在块级作用域内使用。当我们尝试在块级作用域之外调用 foo() 时，会得到一个错误，表明 foo 没有被定义。

了解函数声明在块级作用域中的行为对于编写清晰、可维护的 ES6 代码至关重要。通过灵活运用块级作用域和函数声明，我们可以构建更结构化、更易于理解和维护的代码。