ES6-函數(shù)擴(kuò)展(默認(rèn)參數(shù)篇)

1、默認(rèn)參數(shù)用法

函數(shù)默認(rèn)參數(shù)示例:

//es6寫(xiě)法
function test(a=1,b=2) {
  console.log(a,b)
}

test(3) //3,2
test(3,4) //3,4
test() //1,2

//es5寫(xiě)法
function test(a,b) {
  var a = a || 1;
  var b = b || 2;
  console.log(a,b)
}

函數(shù)參數(shù)的默認(rèn)值可以與解構(gòu)賦值結(jié)合使用,此處的學(xué)習(xí)容易混亂,主要還是學(xué)以致用,盡量在代碼中多用自己學(xué)習(xí)到的新東西(謹(jǐn)代表我個(gè)人觀點(diǎn)),下面是es6官網(wǎng)給出的兩個(gè)例子,思考兩種方式有什么不同:

// 寫(xiě)法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫(xiě)法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函數(shù)沒(méi)有參數(shù)的情況
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值,y 無(wú)值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都無(wú)值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

個(gè)人理解:第一種方式是解構(gòu)賦值默認(rèn)值與函數(shù)參數(shù)默認(rèn)值的結(jié)合,如果函數(shù)沒(méi)有傳入任何參數(shù),函數(shù)的參數(shù)默認(rèn)值就是一個(gè)空對(duì)象,接下來(lái)才是解構(gòu)賦值默認(rèn)值,如果傳入?yún)?shù),則會(huì)按照傳入的參數(shù)的屬性名稱(chēng)查找傳入?yún)?shù)是否具有同名屬性,如果具有,覆蓋默認(rèn)值,否則,繼續(xù)使用默認(rèn)值,如果屬性的值為undefined,則采用默認(rèn)值;第二種方式,只使用了函數(shù)參數(shù)默認(rèn)值,沒(méi)有解構(gòu)賦值的默認(rèn)值,沒(méi)有傳入?yún)?shù)的時(shí)候,相當(dāng)于參數(shù)是{x:0,y:0},然后在對(duì)這個(gè)參數(shù)進(jìn)行解構(gòu),如果傳入了參數(shù),就使用傳入的參數(shù),就會(huì)忽略函數(shù)默認(rèn)值。

此外,還要注意默認(rèn)參數(shù)的位置必須是最后一個(gè),如果不是,則不能省略默認(rèn)參數(shù)的傳值。

2、默認(rèn)參數(shù)作用域

先看個(gè)案例:

var x = 1;
function test (x, y = x) {
  console.log(y)
}
test(2) // 2

只要為函數(shù)設(shè)置了默認(rèn)參數(shù),函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)就會(huì)形成一個(gè)單獨(dú)的作用域,初始化結(jié)束,作用域就會(huì)消失。所以最終的輸出結(jié)果是2。

書(shū)中還有兩個(gè)例子,我覺(jué)得挺好的,就直接搬過(guò)來(lái)了,如下:

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}
foo() // 3
x // 1


var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

個(gè)人理解:第一段代碼中,由于為參數(shù)y設(shè)置了函數(shù)的默認(rèn)參數(shù),所以,在函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)x,y是在一個(gè)單獨(dú)的作用域里面,參數(shù)y里面的x是指向參數(shù)x,而在foo函數(shù)作用域內(nèi),又重新聲明了一個(gè)局部變量x,這個(gè)局部變量x與參數(shù)x,y的作用域并不是同一個(gè)作用域,也就是說(shuō),參數(shù)x只有在y的默認(rèn)參數(shù)里才能訪(fǎng)問(wèn)到,當(dāng)console的時(shí)候,永遠(yuǎn)找的是foo函數(shù)作用域內(nèi)的變量x,也就是3;第二段代碼中,只去掉了一個(gè)var聲明,此時(shí)x=3的過(guò)程是,先在當(dāng)前作用域中找有沒(méi)有聲明過(guò)這個(gè)x,參數(shù)里有聲明變量x,所以,沒(méi)有var的x實(shí)際上就是指向參數(shù)x,緊接著在后面執(zhí)行了y(),相當(dāng)于x=3;x=2;后一個(gè)覆蓋前一個(gè),如果調(diào)換下位置,y();x=3 ,此時(shí)輸出應(yīng)該是3。

下面有一段自己的代碼:

var x = 1;

function foo(x, y = function () { x = 2; }) {

  x = 3;

  y();

  console.log(x);

}

foo(undefined, function () { x = 2; }) //3
x //2

此時(shí),函數(shù)傳入的實(shí)參實(shí)際上是在全局作用域中,并且賦值給了變量y(變量y持有對(duì)全局作用域中實(shí)參的一個(gè)引用),也就是說(shuō),此時(shí)的function() {x=2}實(shí)際上是在全局作用域中找到聲明的變量x,并且將2賦值給x,而foo函數(shù)作用域內(nèi)的x=3,仍然指向參數(shù)x,內(nèi)部作用域有聲明的x,自然不會(huì)去到外部作用域找了,自然打印出3。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容