JS 函数的默认参数，深入透析！

默认参数的使用

在 JavaScript 中，函数的默认参数是在函数定义时指定的，当在函数调用时省略该参数，则使用默认参数的值。例如：

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

在这个函数中，name 参数的默认值是 'John'。当我们调用 greet() 函数时，我们可以省略 name 参数，则函数将使用默认值 'John'。例如：

greet(); // 输出: Hello, John!

如果我们在调用 greet() 函数时指定了 name 参数，则使用指定的值，而忽略默认值。例如：

greet('Mary'); // 输出: Hello, Mary!

默认参数的位置

默认参数只能出现在函数参数列表的末尾。这意味着，如果一个函数有多个参数，则只有最后一个参数可以是默认参数。例如，下面的代码是无效的：

function greet(name, age = 20) {
  // ...
}

因为 age 参数不是参数列表的最后一个参数，所以上面的代码会报错。

默认参数对 length 属性的影响

函数的 length 属性表示函数的参数个数。当函数有默认参数时，length 属性的值不会受到默认参数的影响。例如：

function greet(name = 'John') {
  // ...
}

console.log(greet.length); // 输出: 1

即使 greet() 函数有一个默认参数，但它的 length 属性的值仍然是 1。这是因为默认参数只在函数调用时省略参数时才会使用，而 length 属性的值是在函数定义时确定的。

重新创建的默认参数

当一个函数被调用时，它的参数会被复制到一个新的作用域中。这意味着，即使在函数体内修改了参数的值，也不会影响到函数外的变量。默认参数也是如此。例如：

function greet(name = 'John') {
  name = 'Mary';
  console.log(name); // 输出: Mary
}

const name = 'Bob';
greet();
console.log(name); // 输出: Bob

在 greet() 函数中，name 参数的默认值是 'John'。当我们调用 greet() 函数时，name 参数会被复制到一个新的作用域中，并且被重新创建为 'Mary'。因此，在函数体内，name 参数的值是 'Mary'。但是，在函数外，name 变量的值仍然是 'Bob'。

与形参的结合使用

默认参数可以与形参结合使用。例如：

function greet(name, age = 20) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet('John'); // 输出: Hello, John! You are 20 years old.
greet('Mary', 30); // 输出: Hello, Mary! You are 30 years old.

在上面的代码中，greet() 函数有两个参数：name 和 age。name 参数没有默认值，而 age 参数的默认值是 20。当我们调用 greet() 函数时，我们可以省略 age 参数，则函数将使用默认值 20。如果我们在调用 greet() 函数时指定了 age 参数，则使用指定的值，而忽略默认值。

默认参数的作用域

默认参数的作用域是函数体内。这意味着，默认参数只能在函数体内使用，不能在函数外使用。例如：

function greet(name = 'John') {
  console.log(name); // 输出: John
}

console.log(name); // 报错: ReferenceError: name is not defined

在上面的代码中，name 参数的默认值是 'John'。当我们调用 greet() 函数时，name 参数会被复制到一个新的作用域中，并且被重新创建为 'John'。因此，在函数体内，name 参数的值是 'John'。但是，在函数外，name 变量的值仍然是 undefined。

默认参数的暂时性死区

默认参数有一个暂时性死区，即在函数体内，默认参数的值在函数执行之前是不可用的。这意味着，我们不能在默认参数的值被初始化之前使用它。例如：

function greet(name = name + '!') {
  console.log(name); // 报错: ReferenceError: name is not defined
}

greet('John');

在上面的代码中，name 参数的默认值是 name + '!'。当我们调用 greet() 函数时，name 参数会被复制到一个新的作用域中，并且被重新创建为 'John!'。但是，在函数执行之前，name 参数的值是 undefined。因此，在函数体内，name 参数的值是 undefined。