默認(rèn)參數(shù)：如果沒有值或傳入值為undefined的情況下，默認(rèn)函數(shù)參數(shù)允許定義好的形參對(duì)默認(rèn)值進(jìn)行初始化

下面我們來探討在js中函數(shù)使用默認(rèn)參數(shù)的幾個(gè)細(xì)節(jié)，包括默認(rèn)位置，默認(rèn)參數(shù)對(duì)函數(shù)的length屬性的影響，重新創(chuàng)建的默認(rèn)參數(shù)，與形參的結(jié)合使用，默認(rèn)參數(shù)的作用域以及默認(rèn)參數(shù)的暫時(shí)性死區(qū)。

ES5中的默認(rèn)參數(shù)

在ES5時(shí)，還不能直接直接在參數(shù)中指定默認(rèn)值，只能通過在函數(shù)域內(nèi)聲明變量并賦值，達(dá)到一個(gè)默認(rèn)值的效果，但是這種不會(huì)直觀得表明默認(rèn)值參數(shù)。

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

就如上代碼，我們通過||使y為函數(shù)的默認(rèn)參數(shù)，這就是ES5的實(shí)現(xiàn)方式，但是如果我們的參數(shù)是布爾值的情況，就很容易造成問題。

下面讓我們看看在ES6針對(duì)這個(gè)問題而引入的特性——全新默認(rèn)參數(shù)的誕生

全新默認(rèn)參數(shù)的誕生

ES6函數(shù)參數(shù)默認(rèn)值是可以直接在參數(shù)定義的時(shí)候進(jìn)行默認(rèn)賦值 ， 它的應(yīng)用優(yōu)化了代碼結(jié)構(gòu)，也增強(qiáng)了代碼閱讀者的體驗(yàn)。

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

值得注意的是參數(shù)定義的時(shí)候賦默認(rèn)值需要注意一些細(xì)節(jié)。

默認(rèn)位置

默認(rèn)參數(shù)值的位置一定為尾參數(shù)，即參數(shù)定義的尾部，下面的代碼說明了如果默認(rèn)參數(shù)的定義不放在尾部的情況

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

這種情況即我們無法再通過控制x沒有值使用x的默認(rèn)值，但是可以使用undefined來解決這個(gè)問題

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

即使這樣還是建議將默認(rèn)參數(shù)定義在參數(shù)的尾部，其中一個(gè)原因就是它會(huì)影響函數(shù)length屬性

默認(rèn)參數(shù)對(duì)函數(shù)的length屬性的影響

函數(shù)的length屬性會(huì)返回函數(shù)的參數(shù)數(shù)量，其不包括默認(rèn)參數(shù)，但是這里有一個(gè)問題，它僅僅只會(huì)返回參數(shù)區(qū)域內(nèi)默認(rèn)參數(shù)前的形式參數(shù)數(shù)量

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

上面的函數(shù)x被設(shè)默認(rèn)值，所以其length屬性只返回x之前的形式參數(shù)數(shù)量，由此還是建議將默認(rèn)參數(shù)放在參數(shù)定義的尾部

重新創(chuàng)建的默認(rèn)參數(shù)

函數(shù)在被調(diào)用的時(shí)候，參數(shù)會(huì)被創(chuàng)建，而默認(rèn)參數(shù)有一個(gè)問題，就是他是否會(huì)因?yàn)楹瘮?shù)的重復(fù)調(diào)用而被重新創(chuàng)建，在JS中是會(huì)的，來看下面的例子

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

通過上面兩次調(diào)用fn函數(shù)并為num添加元素，而每次調(diào)用得到的結(jié)果證明了每次調(diào)用函數(shù)都會(huì)重新創(chuàng)建默認(rèn)num。

默認(rèn)參數(shù)與形參的結(jié)合使用

我們可以將默認(rèn)參數(shù)與形參結(jié)合起來使用，如下

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

我們通過尾部的默認(rèn)參數(shù)與前面的形式參數(shù)結(jié)合，可以是字符串形式，也可以是數(shù)組形式，也可以表達(dá)式，比如：fn(x, y, z = x + y)

默認(rèn)參數(shù)的作用域問題

深入默認(rèn)參數(shù)的原理，其本質(zhì)為使用let聲明默認(rèn)參數(shù)，所以這就造成了一個(gè)現(xiàn)象，即當(dāng)我們使用默認(rèn)參數(shù)的時(shí)候，會(huì)開辟一個(gè)單獨(dú)的作用域，在作用域內(nèi)訪問一個(gè)變量的時(shí)候會(huì)進(jìn)行一些步驟，為了更好的理解參數(shù)作用域，拿下面拿一段代碼說明這個(gè)過程：

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

由于y = x是默認(rèn)參數(shù)，所以參數(shù)定義的區(qū)域形成了一個(gè)單獨(dú)作用域，在賦值的過程中，它將與引擎進(jìn)行如下對(duì)話，這里忽略掉LHS與RHS查詢，不是本文的要點(diǎn)

• 引擎在為y賦值的時(shí)候會(huì)詢問當(dāng)前作用域是否見過x，當(dāng)前作用域即參數(shù)聲明的作用域回答沒有
• 引擎會(huì)向上走，詢問上級(jí)作用域，此時(shí)為全局作用域，回答有x，引擎為y賦值

通過這個(gè)簡(jiǎn)單的例子可以理解默認(rèn)參數(shù)的作用域是什么，其實(shí)它很常見，比如說for循環(huán)

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

默認(rèn)參數(shù)的隱藏性死區(qū)（隱藏的暫時(shí)性死區(qū)）

在之前let與const命令這篇文章中提到了暫時(shí)性性死區(qū)的概念，而因?yàn)槟J(rèn)參數(shù)的特性，也會(huì)造成暫時(shí)性死區(qū)的現(xiàn)象

暫時(shí)性死區(qū)：在代碼塊中使用let聲明變量前，該變量不可用，這種現(xiàn)象稱為暫時(shí)性死區(qū)

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

在參數(shù)內(nèi)x = x其本質(zhì)為let x = x在= x的時(shí)候會(huì)出現(xiàn)暫時(shí)性死區(qū)的現(xiàn)象，因?yàn)樵诖丝坛霈F(xiàn)問題的是=后的x，此時(shí)對(duì)x進(jìn)行訪問，所以，而此刻在該作用域內(nèi)let x之前，沒有聲明x，所以該變量不可用，即我們所說的暫時(shí)性死區(qū)的現(xiàn)象。

參考文獻(xiàn)

• ES6標(biāo)準(zhǔn)入門
• 你不知道的javascript上卷
• MDN

到此這篇關(guān)于深入JS函數(shù)中默認(rèn)參數(shù)的使用詳解的文章就介紹到這了,更多相關(guān)JS函數(shù)默認(rèn)參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論