为何Babel会以这种方式转换ES6默认函数参数？

Great question! Your simplified implementation looks reasonable at first glance, but Babel’s more verbose output is actually designed to strictly match the behavior of ES6 default parameters—including edge cases and subtle semantics that your version doesn’t account for. Let’s break down the key reasons:

1. Preserving arguments Object Behavior #

In ES6, even in non-strict mode, modifying a parameter with a default value does not affect the arguments object. For example:

// ES6 code
function initStyles(skipScaling = false) {
  skipScaling = true;
  console.log(arguments[0]); // Logs `undefined` if no argument was passed
}
initStyles();

Your simplified ES5 code would behave differently in non-strict mode:

// Your implementation
function initStyles(skipScaling) {
  if (skipScaling === undefined) skipScaling = false;
  skipScaling = true;
  console.log(arguments[0]); // Logs `true` in non-strict mode (since arguments and params are bound)
}
initStyles();

Babel’s output avoids this binding by:

• Defining the function without explicit parameters (function initStyles())
• Reading directly from arguments to initialize the skipScaling variable

This ensures modifying skipScaling never alters arguments, matching ES6’s semantics perfectly.

2. Consistent Handling of Multi-Parameter Defaults #

Babel’s pattern is designed to scale to functions with multiple default parameters, where dependencies between parameters or partial argument passing need to be handled correctly. For example:

// ES6 code
function buildConfig(width = 100, height = width * 2) { /* ... */ }

Babel’s approach of checking arguments.length ensures that:

• If you call buildConfig(50), height correctly uses 50 * 2 (since width was explicitly passed)
• If you call buildConfig(undefined), width uses the default 100, and height uses 100 * 2

While your single-parameter case works, Babel’s standardized pattern avoids having to write custom logic for every possible number of parameters.

3. Strict Compliance with ES6 Default Rules #

ES6 default parameters activate only when the argument is either:

• Not provided at all (i.e., arguments.length is less than the parameter’s position)
• Explicitly passed as undefined

Your implementation does handle this for a single parameter, but Babel’s code is a generalized solution that works reliably across all parameter combinations, ensuring no edge cases are missed.

内容的提问来源于stack exchange，提问作者Nick