函数-10.5默认参数值

68 阅读2分钟

基础用法

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
}