首頁 > web前端 > js教程 > 主體

使用快取呼叫鏈實作JS方法重載步驟詳解

php中世界最好的语言
發布: 2018-06-01 14:18:29
原創
1091 人瀏覽過

這次帶給大家使用快取呼叫鏈實作JS方法重載步驟詳解,使用快取呼叫鏈實作JS方法重載的注意事項有哪些,以下就是實戰案例,一起來看一下。

1.什麼是方法重載

方法重載是指在一個類別中定義多個同名的方法,但要求每個方法具有不同的參數的類型或參數的個數。
簡而言之就是:方法重載就是方法名稱重複,載入參數不同。

具體看請左轉: 方法重載/百度百科
那麼js如何實現這個呢? ? ?

2. js如何實作?

首先javascript是沒有重載函數/方法這個概念的,但是js提供了一個arguments這個方法參數,透過這個參數的length屬性就可以拿到方法參數的長度, o~對了,咱們今天實現的也僅僅是按照參數長度重載,而不是參數類型~~·length ,
那麼及下載呢,一旦有了方法參數長度,於是出現了比常見的switch寫法:

var seven={
  dosomething:function(){
    switch(arguments.length){
      case 0:
        console.log(arguments.length);
        //dosomething
        break;
      case 1:
        console.log(arguments.length);
        //dosomething
        break;
       case 2:
        //dosomething
        console.log(arguments.length);
        break;
    }
  }
}
登入後複製

3.優化

wow~如果10個方法就需要10個分支~而且很不好維護~因為每個方法體都在case下,或單獨提出來寫成一個function~
然後這些都是不好的~不易維護的,逼格不夠高的~那麼咱們應該如何優雅的實現對於不同參數的同一方法名的處理呢?

這就用到這個apply 這個方法了.

咱們為seven寫一個addMethod方法

var seven = {
  addMethod: function (fname, func) {
    var old = this[fname];
    this[fname] = function () {
      if (arguments.length == func.length) {
        return func.apply(this,arguments);
      }
      if (typeof old == 'function') {
        return old.apply(this, arguments);
      }
    }
  }
};
登入後複製

修改後的seven如上,然後之前寫的switch就可以這樣搞了:

seven.addMethod('dosomething', function (x) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y,z) {
  console.log(arguments.length);
   //dosomething
});
登入後複製

咱們要增加方法,只要呼叫這個addMethod方法就ok了,是不是覺得簡單明了,更加清晰。
那麼這段程式碼的原理呢,其實也很簡單,就是快取舊方法,然後根據參數長度依序apply鍊式調用,直到找到和當前參數等長的方法~然後進行調用。

funcold 很有可能讓初來乍到的童鞋們迷惑,其實不然,這裡巧妙的使用了JavaScript語言的特性,這個old每一次保存的都是上一次方法的引用,而且每次都是全新的,而舊的old又保持著引用,這是什麼呢?閉包嘍~。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼實作Vue專案中使用Vux

#如何利用Vue中slot插槽分發父元件

#

以上是使用快取呼叫鏈實作JS方法重載步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板