剖析 ES6 块级作用域中的遗留细节

2023-09-03 18:41:06

作为一名经验丰富的技术博客作者，我将深入探究 ES6 块级作用域中经常被忽视的微妙之处。在我的文章中，我将结合独到的见解、翔实的解释和明确的代码示例，为您揭开这个谜团。

引言：块级作用域的崛起

ES6 的到来为 JavaScript 引入了块级作用域的概念，通过 let 和 const ，使得变量和函数的作用域仅限于它们被声明的块内。这与传统的函数作用域形成鲜明对比，后者允许变量和函数在整个函数范围内访问。

闭包中的作用域陷阱

然而，在块级作用域中，闭包的存在引入了额外的复杂性。闭包是指在函数执行后仍然保留其作用域的函数。当我们嵌套函数时，内部函数可以访问外部函数的变量。

// 外部函数
function outer() {
  let x = 10;

  // 嵌套函数（闭包）
  function inner() {
    console.log(x); // 输出：10
  }

  return inner;
}

// 执行外部函数并获取闭包
const innerFunc = outer();

在上述代码中，即使 outer 函数执行完毕，innerFunc 仍然可以通过闭包访问其父作用域中的变量 x。这可能会导致意想不到的后果，因为闭包可能会保留对已过期的变量的引用。

提升和暂时性死区

块级作用域还引入了提升和暂时性死区这两个新概念。与函数作用域中的变量一样，块级变量也会被提升，这意味着它们在块内任何位置都可以访问。然而，与函数作用域不同的是，块级变量存在一个暂时性死区，在变量声明之前，无法访问它们。

{
  let x = 10;

  console.log(x); // ReferenceError: x is not defined
}

在上面的示例中，变量 x 提升到了块的顶部，但在 x 声明之前尝试访问它会导致 ReferenceError。这是因为变量 x 在块的暂时性死区内。

遗留细节：嵌套函数的声明

了解了块级作用域、闭包、提升和暂时性死区之后，我们现在可以回到最初的代码示例：

function outer() {
  let x = 10;

  function inner() {
    return x;
  }
  console.log(x); // 输出：10
  console.log(inner()); // 输出：undefined
}
outer();

在这种情况下，问题出在嵌套函数 inner 的声明时。当 inner 函数被声明时，它只能访问其父作用域中的变量 x，但由于 x 在块级作用域中，它存在一个暂时性死区。这意味着在 inner 函数被执行之前，无法访问 x。

解决方法

为了解决这个问题，我们需要在块级作用域中正确地声明嵌套函数 inner。有两种方法可以做到这一点：

使用函数表达式：

function outer() {
  let x = 10;

  // 使用函数表达式声明嵌套函数
  const inner = () => {
    return x;
  };
  console.log(x); // 输出：10
  console.log(inner()); // 输出：10
}
outer();

使用 let 声明：

function outer() {
  let x = 10;

  // 使用 let 声明嵌套函数
  let inner = function() {
    return x;
  };
  console.log(x); // 输出：10
  console.log(inner()); // 输出：10
}
outer();