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

目录

ES5中的默认参数全新默认参数的诞生

默认位置默认参数对函数的length属性的影响重新创建的默认参数默认参数与形参的结合使用默认参数的作用域问题默认参数的隐藏性死区（隐藏的暂时性死区）

参考文献

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

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

ES5中的默认参数

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

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

复制代码

就如上代码，我们通过||使y为函数的默认参数，这就是ES5的实现方式，但是如果我们的参数是布尔值的情况，就很容易造成问题。
下面让我们看看在ES6针对这个问题而引入的特性——全新默认参数的诞生

全新默认参数的诞生

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

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

复制代码

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

默认位置

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

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

复制代码

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

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

复制代码

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

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

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

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

复制代码

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

重新创建的默认参数

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

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

复制代码

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

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

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

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

复制代码

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

默认参数的作用域问题

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

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

复制代码

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

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

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

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

复制代码

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

在之前let与const命令这篇文章中提到了暂时性性死区的概念，而因为默认参数的特性，也会造成暂时性死区的现象
暂时性死区：在代码块中使用let声明变量前，该变量不可用，这种现象称为暂时性死区

1. var x = 1
2. function fn(x = x) {
3.     return x;
4. }

复制代码

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

参考文献

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

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