深入JS函数中默认参数的使用详解

2023-04-24 原文

默认参数：如果没有值或传入值为undefined的情况下，默认函数参数允许定义好的形参对默认值进行初始化

下面我们来探讨在js中函数使用默认参数的几个细节，包括默认位置，默认参数对函数的length属性的影响，重新创建的默认参数，与形参的结合使用，默认参数的作用域以及默认参数的暂时性死区。

ES5中的默认参数

在ES5时，还不能直接直接在参数中指定默认值，只能通过在函数域内声明变量并赋值，达到一个默认值的效果，但是这种不会直观得表明默认值参数。

function fn(x, y) {
  var y = y || 1;
  return x   y;
}
console.log(fn(2)); // 3

就如上代码，我们通过||使y为函数的默认参数，这就是ES5的实现方式，但是如果我们的参数是布尔值的情况，就很容易造成问题。

下面让我们看看在ES6针对这个问题而引入的特性——全新默认参数的诞生

全新默认参数的诞生

ES6函数参数默认值是可以直接在参数定义的时候进行默认赋值，它的应用优化了代码结构，也增强了代码阅读者的体验。

function fn(x, y=1) {
  return x   y;
}
console.log(fn(2)); // 3

值得注意的是参数定义的时候赋默认值需要注意一些细节。

默认位置

默认参数值的位置一定为尾参数，即参数定义的尾部，下面的代码说明了如果默认参数的定义不放在尾部的情况

function fn(x = 1, y) {
  return [x, y];
}
console.log(fn(2)); // [ 2, undefined ]

这种情况即我们无法再通过控制x没有值使用x的默认值，但是可以使用undefined来解决这个问题

function fn(x = 1, y) {
  return [x, y];
}
console.log(fn(undefined,2)); // [ 1, 2 ]

即使这样还是建议将默认参数定义在参数的尾部，其中一个原因就是它会影响函数length属性

默认参数对函数的`length`属性的影响

函数的length属性会返回函数的参数数量，其不包括默认参数，但是这里有一个问题，它仅仅只会返回参数区域内默认参数前的形式参数数量

console.log(function fn(x, y = 1, z) {}.length); // 1

上面的函数x被设默认值，所以其length属性只返回x之前的形式参数数量，由此还是建议将默认参数放在参数定义的尾部

重新创建的默认参数

函数在被调用的时候，参数会被创建，而默认参数有一个问题，就是他是否会因为函数的重复调用而被重新创建，在JS中是会的，来看下面的例子

function fn(x, num = []) {
  num.push(x);
  return num;
}
console.log(fn(1)); // [1]
console.log(fn(2)); // [2]

通过上面两次调用fn函数并为num添加元素，而每次调用得到的结果证明了每次调用函数都会重新创建默认num。

默认参数与形参的结合使用

我们可以将默认参数与形参结合起来使用，如下

function fn(x, y, z = [x, y, 1]) {
  return z;
}
console.log(fn(1, 2)); // [ 1, 2, 1 ]

我们通过尾部的默认参数与前面的形式参数结合，可以是字符串形式，也可以是数组形式，也可以表达式，比如：fn(x, y, z = x y)

默认参数的作用域问题

深入默认参数的原理，其本质为使用let声明默认参数，所以这就造成了一个现象，即当我们使用默认参数的时候，会开辟一个单独的作用域，在作用域内访问一个变量的时候会进行一些步骤，为了更好的理解参数作用域，拿下面拿一段代码说明这个过程：

let x = 1
function() fn(y = x) {
    return y
}
console.log(fn()) // 1

由于y = x是默认参数，所以参数定义的区域形成了一个单独作用域，在赋值的过程中，它将与引擎进行如下对话，这里忽略掉LHS与RHS查询，不是本文的要点

引擎在为y赋值的时候会询问当前作用域是否见过x，当前作用域即参数声明的作用域回答没有
引擎会向上走，询问上级作用域，此时为全局作用域，回答有x，引擎为y赋值

通过这个简单的例子可以理解默认参数的作用域是什么，其实它很常见，比如说for循环

for(let i = 0; i < 100; i  ) {}

默认参数的隐藏性死区（隐藏的暂时性死区）

在之前let与const命令这篇文章中提到了暂时性性死区的概念，而因为默认参数的特性，也会造成暂时性死区的现象

暂时性死区：在代码块中使用let声明变量前，该变量不可用，这种现象称为暂时性死区

var x = 1
function fn(x = x) {
    return x;
}

在参数内x = x其本质为let x = x在= x的时候会出现暂时性死区的现象，因为在此刻出现问题的是=后的x，此时对x进行访问，所以，而此刻在该作用域内let x之前，没有声明x，所以该变量不可用，即我们所说的暂时性死区的现象。

参考文献

ES6标准入门
你不知道的javascript上卷
MDN

到此这篇关于深入JS函数中默认参数的使用详解的文章就介绍到这了,更多相关JS函数默认参数内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！