默認參數：如果沒有值或傳入值為undefined的情況下，默認函數參數允許定義好的形參對默認值進行初始化

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

ES5中的默認參數

在ES5時，還不能直接直接在參數中指定默認值，只能通過在函數域內聲明變量并賦值，達到一個默認值的效果，但是這種不會直觀得表明默認值參數。

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

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

下面讓我們看看在ES6針對這個問題而引入的特性——全新默認參數的誕生

全新默認參數的誕生

ES6函數參數默認值是可以直接在參數定義的時候進行默認賦值 ， 它的應用優(yōu)化了代碼結構，也增強了代碼閱讀者的體驗。

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

值得注意的是參數定義的時候賦默認值需要注意一些細節(jié)。

默認位置

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

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屬性會返回函數的參數數量，其不包括默認參數，但是這里有一個問題，它僅僅只會返回參數區(qū)域內默認參數前的形式參數數量

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

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

重新創(chuàng)建的默認參數

函數在被調用的時候，參數會被創(chuàng)建，而默認參數有一個問題，就是他是否會因為函數的重復調用而被重新創(chuàng)建，在JS中是會的，來看下面的例子

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

通過上面兩次調用fn函數并為num添加元素，而每次調用得到的結果證明了每次調用函數都會重新創(chuàng)建默認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是默認參數，所以參數定義的區(qū)域形成了一個單獨作用域，在賦值的過程中，它將與引擎進行如下對話，這里忽略掉LHS與RHS查詢，不是本文的要點

• 引擎在為y賦值的時候會詢問當前作用域是否見過x，當前作用域即參數聲明的作用域回答沒有
• 引擎會向上走，詢問上級作用域，此時為全局作用域，回答有x，引擎為y賦值

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

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

默認參數的隱藏性死區(qū)（隱藏的暫時性死區(qū)）

在之前let與const命令這篇文章中提到了暫時性性死區(qū)的概念，而因為默認參數的特性，也會造成暫時性死區(qū)的現象

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

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

在參數內x = x其本質為let x = x在= x的時候會出現暫時性死區(qū)的現象，因為在此刻出現問題的是=后的x，此時對x進行訪問，所以，而此刻在該作用域內let x之前，沒有聲明x，所以該變量不可用，即我們所說的暫時性死區(qū)的現象。

參考文獻

• ES6標準入門
• 你不知道的javascript上卷
• MDN

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

最新評論