被隐藏在函数内部的块级作用域

在 JavaScript 中，块级作用域的概念至关重要，它允许我们在函数内部定义变量，从而限制这些变量的作用域，但这种机制有时也会受到一些干扰，最常见的情况之一就是与函数的组合使用。


当一个函数执行时, 它会创建一个新的执行上下文(execution context)。在这个执行上下文中，将创建一个变量对象(Variable Object, VO),用来存储函数内部定义的所有变量。变量提升会在执行上下文创建时发生, 它会将所有声明的变量提升到该执行上下文的顶部。


比如, 如下代码中, 虽然变量 x 在函数内部定义, 但由于变量提升, 它在函数顶部就被声明了。

```javascript
function myFunction() {
  var x = 10;
  console.log(x); // 10
}

myFunction();

尽管变量提升提供了便利, 但它有时也会导致意料之外的问题。考虑一下下面的代码:

function outerFunction() {
  var x = 10;

  function innerFunction() {
    console.log(x); // undefined
  }

  innerFunction();
}

outerFunction();

在这个例子中, 变量 x 在 outerFunction 函数中定义, 但由于变量提升, 它被提升到 outerFunction 函数的顶部。当 innerFunction 函数执行时, 它试图访问变量 x, 但由于 x 是在 outerFunction 函数中声明的, 因此 innerFunction 函数无法访问它, 导致输出为 undefined。

为了解决这个问题, 我们可以使用词法作用域的概念。词法作用域是根据函数定义时的作用域来确定变量的作用域, 而不是执行时的作用域。这意味着 innerFunction 函数的作用域是 outerFunction 函数, 因此它可以访问 outerFunction 函数中定义的所有变量。

要使用词法作用域, 我们需要使用 let 或 const 来声明变量, 如下所示:

function outerFunction() {
  let x = 10;

  function innerFunction() {
    console.log(x); // 10
  }

  innerFunction();
}

outerFunction();

在上面的例子中, 变量 x 使用 let 关键字声明, 这意味着它具有词法作用域。因此, innerFunction 函数可以访问 outerFunction 函数中定义的变量 x, 并正确地输出 10。

因此, 当函数与块级作用域结合使用时, 理解变量提升和词法作用域的概念非常重要。通过理解这些概念, 我们可以编写更加健壮可靠的代码, 避免意料之外的错误。