函式除了執行之外，還有很多神奇的使用方法。加深了我對於函式的認知跟理解。也試想如何在更多使用上有彈性的使用函式。

這章想學到什麼？

• 自我記憶的函式，函式的 cache
• 仿造之術，函式仿造陣列的方法
• 多個參數寫法，解構或 apply 應用
• 函式多載（忍者書裡翻譯重載怪怪的）大挑戰

程式碼閱讀練習與撰寫

自我記憶的函式，函式的 cache

在函式可以執行，神奇的是函式上也可以使用屬性。

const isRecordPV = function (id) {
  if(!isRecordPV.lists) isRecordPV.lists = [];
  if(!isRecordPV.lists.includes(id)) { 
      isRecordPV.lists.push(id);
      return false;
  } else {
      return true;
  }
}
undefined
const handleRecord = function (id) {
   if(!isRecordPV(id)) {
        console.log("send ga event")
   } else {
        console.log("it has been already recorded!")
   }
    
}
undefined
handleRecord("1234")
VM1917:3 send ga event
undefined
handleRecord("4321")
VM1917:3 send ga event
undefined
handleRecord("1234")
VM1917:5 it has been already recorded!

函式仿造之術，函式仿造陣列的方法

var elems = {
    length: 0,
    add: function(elem) {
        Array.prototype.push.call(this, elem);
    },
    gather: function(DOM){
        this.add(document.querySelector(DOM));
    }
}

//執行結果
undefined
elems.gather(".icon-muzli")
undefined
elems[0]
<i class=​"icon-muzli" ng-click=​"clickLogo()​">​…​</i>​

多個參數寫法，解構或 apply 應用

//現在你可能用解構的解法去給多個參數
Math.max(...[1, 40, 5, 31])

//你也可以用 apply 方法
Math.max.apply(Math, [1, 40, 5, 31])

函式多載（忍者書裡翻譯重載怪怪的）大挑戰

我們可以在任何函式裡檢視傳進來的參數，或參數長度。（很多時候函式庫的設計不知道使用者會傳入什麼東西）

//利用傳入設定做不同的處理
function foo(a, b, config) {
  // ...
  if (config['test']) { } //if test param exists, do something.. 
}

foo(1, 2, {"method":"add"});
foo(3, 4, {"test":"equals", "bar":"tree"});

//or 在函式裡用判斷參數數量，進行不同行為

var ninja = {
    hide: function () {
        switch (arguments.lenth) {
            case: 0:
                /＊做些什麼＊/
            case: 1:
                /＊做些別的＊/
                break;
            case: 2:
                /＊做些其他＊/
                break;
        }
    
    }
}

//or 寫一個方法去處理附加方法

function addMethod (obj, name, fn) {
    var old = obj[name];
    console.log(old);
    obj[name] = function () {
        if(fn.length == arguments.length) {
            return fn.apply(this, arguments)
        } else if (typeof old === 'function') {
            return old.apply(this, arguments);
        }
    }
}

let ninja = {}

addMethod(ninja, 'hide', function(){
  console.log(`hidden!`)
})

addMethod(ninja, 'hide', function(para1){
  console.log(`got! ${para1}`)
})

addMethod(ninja, 'hide', function(para1, para2){
  console.log(`got! ${para1} and ${para2}`)
})

ninja.hide()
ninja.hide('a girl')
ninja.hide('a girl', 'long hair')

Plans are worthless, but planning is everything. —— Dwight Eisenhower

參考資料

https://stackoverflow.com/questions/456177/function-overloading-in-javascript-best-practices
https://www.programiz.com/javascript/examples/function-overloading