明明设了默认值，为什么我的JavaScript函数参数还是undefined？

• 明明设了默认值，为什么我的JavaScript函数参数还是undefined？*

---

引言

在JavaScript开发中，函数参数的默认值是一个常见且实用的特性。ES6引入了默认参数语法，允许开发者为函数参数设置默认值，以避免在参数未传递时出现undefined的问题。然而，许多开发者在实际使用中会发现：明明已经设置了默认值，但参数仍然被赋值为undefined，导致程序出现意料之外的行为。为什么会出现这种现象？本文将深入探讨这一问题的根源，并给出解决方案。

默认参数的基本用法

在ES6之前，JavaScript函数参数的默认值通常通过逻辑或运算符（||）或条件判断来实现。例如：

function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}

ES6之后，可以直接在函数声明中为参数指定默认值：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

这种语法更简洁，也更符合直觉。然而，尽管默认参数的语法看起来简单，但在某些情况下，它的行为可能并不如预期。

---

默认参数失效的常见原因

1. 显式传递undefined

默认参数仅在参数值为undefined时生效。如果调用函数时显式传递了undefined，默认值会被忽略。例如：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(undefined); // 输出: Hello, Guest!
greet(null);      // 输出: Hello, null!
greet();          // 输出: Hello, Guest!

这里的关键点是：默认值仅在参数严格等于undefined时触发。如果传递的是null或其他假值（如0、false、空字符串等），默认值不会生效。

2. 解构赋值中的默认值问题

在解构赋值中，默认值的规则稍有不同。如果解构的对象属性不存在或值为undefined，默认值会生效。但要注意解构的嵌套层级和默认值的设置位置：

function getUser({ name = 'Guest', age = 18 } = {}) {
  console.log(`Name: ${name}, Age: ${age}`);
}

getUser(); // 输出: Name: Guest, Age: 18
getUser({}); // 输出: Name: Guest, Age: 18
getUser({ name: null }); // 输出: Name: null, Age: 18

这里的问题在于，如果解构的目标对象不是undefined，而是null或一个空对象，默认值的触发条件会有所不同。

3. 默认参数的求值时机

默认参数的求值是惰性的，只有在需要时才会计算。例如：

function getValue() {
  console.log('getValue called');
  return 42;
}

function foo(x = getValue()) {
  console.log(x);
}

foo(); // 输出: getValue called, 42
foo(1); // 输出: 1

如果默认值是一个函数调用，该函数只会在参数未传递或为undefined时执行。然而，如果默认值的表达式本身抛出错误，可能会导致函数无法正常执行。

4. 作用域与临时死区（TDZ）

默认参数的作用域规则与函数作用域和临时死区（Temporal Dead Zone, TDZ）相关。例如：

function foo(x = y, y = 2) {
  console.log(x, y);
}

foo(); // 抛出ReferenceError: y is not defined

这是因为默认参数的作用域是从左到右的，x = y的求值发生在y的声明之前，此时y处于TDZ中，因此会抛出错误。

---

深入理解默认参数的行为

1. 默认参数与arguments对象

在非严格模式下，arguments对象会反映函数参数的动态变化。然而，在默认参数存在时，arguments对象的行为会有所不同：

function foo(a = 1, b = 2) {
  console.log(arguments[0], arguments[1]);
  console.log(a, b);
}

foo(); // 输出: undefined undefined, 1 2
foo(3); // 输出: 3 undefined, 3 2

在这种情况下，arguments对象不会反映默认参数的值，而是严格记录实际传递的参数。

2. 默认参数与剩余参数

默认参数可以与剩余参数（Rest Parameters）结合使用，但需要注意顺序：

function foo(a = 1, ...rest) {
  console.log(a, rest);
}

foo(); // 输出: 1, []
foo(2, 3, 4); // 输出: 2, [3, 4]

剩余参数必须放在参数列表的最后，因此默认参数不能出现在剩余参数之后。

---

解决默认参数问题的实践建议

1. 避免显式传递undefined

如果希望默认值始终生效，应避免显式传递undefined。可以通过逻辑判断或解构赋值来规避：

function greet(name) {
  name = name ?? 'Guest'; // 使用空值合并运算符
  console.log(`Hello, ${name}!`);
}

2. 使用解构赋值的默认值

解构赋值的默认值更灵活，适用于对象或数组参数：

function getUser({ name = 'Guest', age = 18 } = {}) {
  console.log(`Name: ${name}, Age: ${age}`);
}

getUser({ name: 'Alice' }); // 输出: Name: Alice, Age: 18

3. 利用函数封装默认值逻辑

对于复杂的默认值逻辑，可以封装为一个函数：

function getDefaultName() {
  return 'Guest';
}

function greet(name = getDefaultName()) {
  console.log(`Hello, ${name}!`);
}

4. 注意默认参数的作用域

避免在默认参数表达式中引用未声明的变量，尤其是在嵌套函数中：

function outer() {
  const x = 1;
  function inner(y = x) { // 正确，x在作用域内
    console.log(y);
  }
  inner();
}

---

总结

JavaScript的函数参数默认值是一个强大的特性，但其行为有时会让人感到困惑。通过理解默认值的触发条件、解构赋值的规则以及作用域的影响，可以避免大多数常见问题。在实践中，合理使用空值合并运算符（??）、解构赋值和函数封装，可以写出更健壮的代码。

希望通过本文的分析，你能更深入地掌握默认参数的用法，并在实际开发中避免类似的陷阱。