函數形參默認值 · Javascript基礎篇

[TOC] >[success] # 函數形參默認值 ~~~ 在'ES5'函數傳遞'默認值參數'時候通常大家都會像下面這么寫，如果'timeout'和'callback'不傳參數，系統就會默認給'timeout'一個默認值'2000'，給'callback'一個空的'function'，但是這么寫有一個'缺陷'，如果'timeout'傳的值為'0'、'undefined'、'null'，那么他的默認值都會為'2000'，因為數字'0'、'undefined'、 'null'都為'false' ~~~ >[success] ## 不嚴謹寫法 ~~~ function makeRequest(url, timeout, callback) { timeout = timeout || 2000 callback = callback || function () { } } // 有參數 makeRequest('www.baidu.com', 500, function(){console.log(123)}) // url = 'www.baidu.com' // timeout = 500 // callback = function(){console.log(123)} // 無參數 makeRequest() // url = undefined // timeout = 2000 // callback = function(){} ~~~ >[success] ## ES5默認參數（嚴謹寫法） ~~~ function makeRequest(url, timeout, callback) { // 這里typeof不可以這樣寫' typeof timeout !== null ' 因為null是空對象指針，他的類型是對象 timeout = (typeof timeout !== 'undefined' && typeof timeout !== 'object') ? timeout : 2000 callback = (typeof callback !== 'undefined' && typeof callback !== 'object' && typeof callback !== 'number') ? callback : function () { } } makeRequest('www.baidu.com', undefined, null) timeout // 2000 callback // function(){} ~~~ >[success] ## ES6默認參數寫法 ~~~ function makeRequest(url, timeout = 2000, callback = function () { }) { } makeRequest('www.baidu.com', 0, undefined) url // www.baidu.com timeout // 0 callback // function(){} // 如果不傳參數就是 undefined ， undefined 時就會執行參數默認值，但是null是空對象指針就會忽略 //默認值，打印出的值為null makeRequest('www.baidu.com', null, undefined) url // www.baidu.com timeout // null callback // function(){} ~~~ >[success] ## 默認參數值對arguments的影響 ### ES5非嚴格模式下 ~~~ 在ES5下'a'等于'arguments[0]'，'b'等于'arguments[1]'，但是在'非嚴格模式下'修改了參數會 '同步更新'到'arguments'對象中，所以修改了'a'和'b'時，'arguments'對象會被重新賦值 ~~~ ~~~ function test(a, b) { console.log(a === arguments[0]) console.log(b === arguments[1]) a = 1 b = 2 console.log(a === arguments[0]) console.log(b === arguments[1]) } test(0, 0) // true // true // true // true ~~~ ### ES5嚴格模式下 ~~~ 在'嚴格模式'下修改參數是不會導致'arguments'改變的。 ~~~ ~~~ function test(a, b) { 'use strict' console.log(a === arguments[0]) console.log(b === arguments[1]) a = 1 b = 2 console.log(a === arguments[0]) console.log(b === arguments[1]) } test(0, 0) // true // true // false // false ~~~ ### ES6中的變化 ~~~ 在'ES6'的'默認值參數'的'方法中'無論你在'function'中，是否定義了嚴格模式（寫沒寫'use?strict'）， 'ES6'都將以'ES5'的'嚴格模式'來看待 ~~~ ~~~ function test(a, b = 2) { console.log(arguments.length) console.log(a === arguments[0]) console.log(b === arguments[1]) a = 1 b = 2 console.log(a === arguments[0]) console.log(b === arguments[1]) } test(0) // 1 // true // true // false // false ~~~ >[success] ## 默認參數表達式( 默認參數小技巧 ) ~~~ '默認參數表達式'更多的'傳默認值參數'的'技巧'。 ~~~ >[success] ### 技巧1( 函數當做默認參數 ) ~~~ 可以把'函數'當做'默認參數'，然后在函數中計算后最終返回一個'計算結果'作為'參數'，如下： ~~~ ~~~ function c() { return 5 } function getValue(a, b = c()) { return a + b } console.log(getValue(1, 2)) // 3 console.log(getValue(1)) // 6 或者 function getValue(value){ // 用來計算 return value + 5 } function add(a, b = getValue(a)){ return a + b } console.log(add(1)) // 7 console.log(add(1,1)) // 2 ~~~ >[success] ### 技巧2( 參數1作為參數2的默認參數 ) ~~~ 把'參數1'作為'參數2'的'默認值參數'，也可以作為'參數2'的方法的'參數'進行計算 ~~~ ~~~ function add(first, second = first) { return first + second } console.log(add(1)) // 2 console.log(add(1, 1)) // 2 或者 function getValue(value){ // 用來計算 return value + 5 } function add(a, b = getValue(a)){ return a + b } ~~~ ### 注意 ~~~ 在'引用參數'作為'參數默認值'的時候，只可以'后面參數'引用'前面參數'當做默認值參數，不可以'前面參數'，引用'后面參數'作為'默認值參數'，大白話就是'參數2'可以把'參數1'，當成自己的默認值參數，但是'參數1'不可以把'參數2'當做自己的'默認值參數',舉例： ~~~ ~~~ function test(a = b, b){ return a + b } console.log(test(1,2)) // 3 console.log(test(undefined,1)) ~~~ ~~~ 因為調用'test(undefined,1)'時候'a'使用'b'作為'參數'時候'b'還'未定義' ~~~ >[success] ## 默認參數的臨時死區 ~~~ 簡單來說參數的執行方式和'let、const'一樣不存在'變量提升'，如果'未定義初始化'就提前使用就會報錯。 ~~~ ### 正確寫法 ~~~ function test(a, b = a){ return a + b } console.log(test(1,2)) // 3 // 相當于以下代碼 let a = 1 let b = 2 console.log(test(1)) // 2 // 相當于以下代碼 let a = 1 let b = a ~~~ ### 錯誤寫法 ~~~ function test(a = b, b){ return a + b } console.log(test(1,2)) // 3 // 相當于以下代碼 let a = 1 let b = 2 console.log(test(undefined,1)) // 報錯 // 相當于以下代碼 let a = b let b = 1 ~~~