闭包作用域的形参赋值默认值探索

前端

2024-02-22 13:43:10

闭包是 JavaScript 中强大的工具，允许函数访问其执行上下文之外的变量。理解闭包的范围和赋值默认值至关重要，因为它可以帮助我们避免意外行为和代码错误。

形参赋值默认值

在 JavaScript 中，函数参数在声明时可以指定默认值。当调用函数时，如果未提供参数，则使用默认值。在闭包中，形参的默认值在函数执行时确定。

作用域链与闭包

每个函数都有一个作用域链，它包含当前执行上下文以及所有父级执行上下文。闭包可以访问其作用域链中的变量，即使这些变量在函数执行后不再可用。

形参赋值默认值的示例

让我们通过一个示例来探索形参赋值的默认值是如何在闭包中工作的：

function outer() {
  const name = "John";

  function inner(age = 30) {
    console.log(`Name: ${name}, Age: ${age}`);
  }

  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出："Name: John, Age: 30"

在这个示例中，inner 函数接受一个参数 age，它具有默认值 30。当调用 inner 函数时，我们没有提供 age 参数，因此它将使用默认值。即使 inner 函数在 outer 函数执行后被返回，它仍可以访问作用域链中的变量 name，这是闭包的本质。

潜在的影响

在闭包中使用形参赋值默认值可能会导致意外行为。例如，考虑以下代码：

const counter = (start = 0) => {
  let count = start;
  return () => count++;
};

const counter1 = counter();
const counter2 = counter();

counter1(); // 输出：1
counter1(); // 输出：2
counter2(); // 输出：1

在这个示例中，counter 函数接受一个可选参数 start，默认为 0。虽然两个 counter 实例都使用默认值，但它们共享相同的闭包变量 count。因此，调用 counter1 也会增加 counter2 的计数，反之亦然。