基础用法
es6之前实现默认参数的方式是检查某个参数的值是否等于undefined
function sayName (name) {
name = (typeof name !== 'undefined') ? name : 'XiaoSong'
return name
}
console.log(sayName()) // XiaoSong
console.log(sayName('js')) // js
es6到来之后就支持显示的定义默认参数了
function sayName (name = 'XiaoSong') {
return name
}
console.log(sayName()) // XiaoSong
console.log(sayName('js')) // js
NOTE: 1、给参数传undefined相当于没有传值, 函数会使用参数的默认值
function sayPhone (name = 'xiaomi', price=1999) {
return name + price
}
console.log(sayPhone(undefined, '5999')) // xiaomi5999
console.log(sayPhone('redmi', '2999')) // redmi2999
NOTE: 2、在使用默认参数时,arguments的值始终与调用函数时传入的值为准,不反应参数的默认值
NOTE: 3、箭头函数也可以用默认参数
const sayName = (name = 'XiaoSong') => name
NOTE: 4、默认参数也可以动态调用函数获取
const getName = () => 'XiaoSong'
function sayName (name = getName()) {
return name
}
默认参数作用域与暂时性死区
首先简单说明一下暂时性死区。当程序进入let或const声明的变量的作用域时,JavaScript引擎会给变量创建存储空间但是不会初始会和赋值,当在此之前访问变量会报引用错误(ReferenceError)。这在语法上被称为暂时性死区。var声明的变量会出现变量提升,所以不会产生暂时性死区。
const refer = () => {
console.log(name) // ReferenceError: ····
let name = 'XiaoSong'
}
refer()
给多个参数定义默认值实际上就是使用let关键字按顺序声明变量一样,所以会遵循暂时性死区。
// 后定义的参数可以引用前面的参数
function sayName (name = "XiaoSong", name1 = name) {
return name + ' ' + name1
}
console.log(sayName())
// 先定义的参数不能引用后定义的参数,会出现报错
function sayName (name = name1 , name1 = 'XiaoSong') {}
参数有自己的作用域, 它们不能引用函数体的作用域
// 如果不传第二个参数就会报错
function sayName (name = 'XiaoSong', age = defaultAge) {
let defaultAge = 21
}