JavaScript函数参数默认值怎么设置及undefined陷阱

在 JavaScript 中设置函数参数默认值最标准且现代的方式，是在函数声明的形参列表里直接通过赋值操作符 = 为参数赋予初始值。例如 function request(url, timeout = 3000) { ... }。这套机制能够有效避免调用方缺省参数时代码发生崩溃或产生非预期的计算错误。但其核心判断规则有一个极其关键的细节：默认值仅在传入实参为 undefined 或未传参时才会生效，传入 null、0、false 或空字符串等其它假值均不会触发默认值。理解这一严格的触发边界，是避免在业务开发中产生数据穿透与隐性 Bug 的基石。

一、函数参数默认值的演进与基本设置方式

在 ECMAScript 2015（ES6）正式推出参数默认值语法之前，开发者通常在函数体内部通过逻辑或操作符 || 来实现缺省回退。这种旧做法存在一个显而易见的逻辑漏洞：逻辑或判断的是操作数是否为“假值（falsy）”。当业务传入合法的数字 0、空字符串 "" 或者布尔值 false 时，短路表达式也会错误地将其当作缺失而回退到默认值。

// ES5 时代的短路写法（存在严重假值缺陷）
function setPagination(page, pageSize) {
  // 当传入 pageSize 为 0 时，会被错误重置为 20
  pageSize = pageSize || 20;
  return `Page: ${page}, Size: ${pageSize}`;
}

// 严谨的 ES5 防御写法（代码冗长）
function setPaginationSafe(page, pageSize) {
  pageSize = (typeof pageSize !== 'undefined') ? pageSize : 20;
  return `Page: ${page}, Size: ${pageSize}`;
}

现代 JavaScript 从语言层面原生支持了形参默认值语法。声明形式直接清晰，同时底层严格对齐了形参是否未被赋值的语义。当调用者未提供实参，或者明确传递了一个值为 undefined 的占位符时，JavaScript 引擎才会对默认值表达式进行求值并赋予形参。

// ES6 原生参数默认值（推荐的标准方式）
function createUser(name, role = 'member', isActive = true) {
  return {
    name,
    role,
    isActive
  };
}

console.log(createUser('Alice')); 
// 输出: { name: 'Alice', role: 'member', isActive: true }

console.log(createUser('Bob', undefined, false)); 
// 输出: { name: 'Bob', role: 'member', isActive: false }

二、核心陷阱：只有 undefined 才会触发默认值

许多初学者或从其他语言转入 JavaScript 的开发者最容易犯的错误，就是将 null 与 undefined 混为一谈。在规范中，JavaScript 严格区分两者的语义：undefined 代表“未定义或未提供”，而 null 代表“值存在但内容为空对象/空引用”。

这种语义差异在函数参数默认值机制中被严格贯彻：

• 省略实参或传入 undefined：形参被判定为未被提供，触发默认值。
• 显式传入 null：实参被视为明确传入了一个有意义的“空值”，不会触发默认值，形参的值即为 null。
• 传入 0、false、"" 或 NaN：这些在条件判断中会被转换为 false 的值，均属于明确给出的有效实参，同样不会触发默认值。

function configure(cacheSize = 100, label = 'default-cache') {
  console.log(`cacheSize: ${cacheSize}, label: ${label}`);
}

// 1. 省略传参 -> 触发默认值
configure();
// 输出: cacheSize: 100, label: default-cache

// 2. 传入 undefined -> 触发默认值
configure(undefined, undefined);
// 输出: cacheSize: 100, label: default-cache

// 3. 传入 null -> 陷阱：不触发默认值！
configure(null, null);
// 输出: cacheSize: null, label: null

// 4. 传入有效假值 0 与 空字符串 -> 不触发默认值（符合预期）
configure(0, '');
// 输出: cacheSize: 0, label: 

三、默认参数的惰性求值与“暂时性死区”（TDZ）

参数默认值并非在函数定义加载时一次性计算好，而是在函数每次被调用且满足触发条件时动态求值（惰性求值，Lazy Evaluation）。如果默认值是一个函数调用或表达式，在未触发默认值时，该表达式根本不会被执行。

let callCount = 0;
function getNextId() {
  callCount += 1;
  return `ID_${callCount}`;
}

function registerUser(id = getNextId()) {
  return id;
}

registerUser('CUSTOM_1'); // 传入了实参，getNextId 不会被调用
console.log(callCount);   // 输出: 0

registerUser();           // 缺省实参，触发动态执行
console.log(callCount);   // 输出: 1

与此同时，形参列表自身会形成一个独立的作用域，位于全局作用域和函数体内作用域之间。形参的初始化顺序是从左到右依次进行的。后声明的形参默认值可以引用先前已经初始化完成的形参；但如果先声明的形参默认值试图引用后声明的形参，就会落入该参数的“暂时性死区（Temporal Dead Zone, TDZ）”，直接抛出 ReferenceError。

// 正确：b 的默认值引用前面已经完成初始化的 a
function calcArea(a = 10, b = a * 2) {
  return a * b;
}
console.log(calcArea()); // 输出: 200 (10 * 20)

// 错误：a 初始化时，b 处于暂时性死区，尚未被声明
function calcBad(a = b * 2, b = 10) {
  return a * b;
}
calcBad(); // 抛出异常: ReferenceError: Cannot access 'b' before initialization

四、对象解构参数中的双层默认值机制

在前端组件封装或公共模块设计中，通常会使用配置对象（Options Pattern）传参。结合解构赋值与默认值时，必须明确区分两个层级的默认行为：解构属性自身的默认值（内层兜底）与解构目标对象的默认值（外层兜底）。

1. 仅有内层默认值的隐患

// 仅为解构出的属性设置默认值
function setupServer({ port = 8080, host = 'localhost' }) {
  console.log(`Server starting on ${host}:${port}`);
}

// 正常传入对象：触发内层属性默认值
setupServer({ port: 3000 }); 
// 输出: Server starting on localhost:3000

// 致命错误：不传参调用
setupServer(); 
// 抛出异常: TypeError: Cannot destructure property 'port' of 'undefined' as it is undefined.

当调用 setupServer() 时，实参为 undefined，JavaScript 尝试对 undefined 执行属性解构解包，直接引发致命的运行时 TypeError。

2. 稳健的双层默认值架构

为了让该函数支持不传递任何参数的调用方式，必须为整个解构对象提供一个外层空对象 = {} 作为终极兜底。调用方既可以完全省略传参，也可以只传部分配置项，代码均能平稳运行：

// 双层默认值：外层防 undefined 崩溃，内层防属性缺失
function setupServerSafe({ port = 8080, host = 'localhost' } = {}) {
  console.log(`Server starting on ${host}:${port}`);
}

setupServerSafe(); 
// 输出: Server starting on localhost:8080 （安全执行）

setupServerSafe({ host: '127.0.0.1' }); 
// 输出: Server starting on 127.0.0.1:8080 （部分配置覆盖）

五、工程实践中的避坑法则

综合以上机制，在日常编写健壮的 JavaScript 函数时，建议遵循以下几条关键原则：

1. 防范后端返回的 null 穿透：如果某个配置项必须保证非空，且上游数据源可能包含 null，不能仅依赖参数默认值。可以在函数体入口使用空值合并操作符（Nullish Coalescing Operator ??）或显式判断进行二次兜底：

   function loadAsset(url, options = {}) {
     // 如果调用方显式传了 { retry: null }，在此处进行彻底防御
     const retry = options.retry ?? 3;
   }

2. 注意 Function.prototype.length 的变化：函数的 length 属性代表该函数预期的形参个数。一旦某个形参设置了默认值，该形参及其之后的所有形参都不会再计入 length。

   function testA(a, b, c) {}
   console.log(testA.length); // 3
   
   function testB(a, b = 2, c) {}
   console.log(testB.length); // 1 （b 及其后续的 c 均不计入）

   在编写柯里化（Currying）函数或依赖 fn.length 进行元编程的框架逻辑时，必须格外留意这一特性。
3. 避免在默认值中直接依赖外部可变状态：尽量让默认参数保持纯函数属性或引用静态配置，避免在默认值表达式中直接读取未初始化的全局对象或动态自增计数器，防止产生隐蔽的时序依赖 Bug。