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

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

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

ES5 中的默认参数

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

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

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

全新默认参数的诞生

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 ]

即使这样还是建议将默认参数定义在参数的尾部。

重新创建的默认参数

函数在被调用的时候，参数会被创建，而默认参数有一个问题，就是他是否会因为函数的重复调用而被重新创建，在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 = 1function() 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命令 - 掘金 (juejin.cn)这篇文章中提到了暂时性性死区的概念，而因为默认参数的特性，也会造成暂时性死区的现象

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

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

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

参考文献

• ES6 标准入门

• 你不知道的 javascript 上卷

• MDN