默认参数:如果没有值或传入值为 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函数默认参数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
查看更多关于深入JS函数中默认参数的使用详解的详细内容...