Explication détaillée des étapes pour implémenter la surcharge de la méthode JS à l'aide de la chaîne d'appel du cache

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de la chaîne d'appel de cache pour implémenter JS surcharge de méthode , et quelles sont les précautions pour utiliser la chaîne d'appel de cache pour implémenter la surcharge des méthodes JS. Voici quelques cas pratiques.

1. Qu'est-ce que la surcharge de méthode ?

La surcharge de méthode fait référence à la définition de plusieurs méthodes portant le même nom dans une classe, mais exigeant que chaque méthode ait des types ou des numéros de paramètres différents.
En bref : la surcharge de méthode signifie des noms de méthodes répétés et des paramètres de chargement différents.

Veuillez tourner à gauche pour plus de détails : Surcharge de méthode/Encyclopédie Baidu
Alors, comment js implémente-t-il cela ? ? ?

2. Comment implémenter js ?

Tout d'abord, javascript n'a pas le concept de fonctions/méthodes surchargées, mais js fournit un paramètre de méthode appelé arguments. La longueur du paramètre de méthode peut être obtenue via l'attribut length. de ce paramètre. o~ D'ailleurs, ce que nous avons implémenté aujourd'hui n'est qu'une surcharge en fonction de la longueur du paramètre, pas du type de paramètre~~·longueur,
Quant au téléchargement, une fois que la longueur du paramètre de méthode est disponible, une méthode plus courante. la méthode d'écriture du commutateur apparaît :

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. Optimisation

wow~ S'il y a 10 méthodes, 10 branches sont nécessaires~ et c'est très difficile à maintenir~ parce que chaque corps de méthode est au cas où, ou le proposer séparément et l'écrire sous forme de fonction~
Mais ceux-ci sont mauvais~pas faciles à maintenir et la qualité n'est pas assez élevée~Alors, comment devrions-nous implémenter avec élégance le traitement du même nom de méthode avec des paramètres différents ?

C'est là que la méthode apply est utilisée.

Écrivons une méthode addMethod pour sept

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);
      }
    }
  }
};

Le sept modifié est comme ci-dessus, et ensuite ce que nous avons. a écrit avant Le changement peut être fait comme ceci :

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
});

Si nous voulons ajouter une méthode, il suffit d'appeler la méthode addMethod Vous ne trouvez pas que c'est simple et clair ?
Le principe de ce code est en fait très simple. Il s'agit de mettre en cache l'ancienne méthode, puis d'appliquer des appels en chaîne en séquence en fonction de la longueur du paramètre jusqu'à ce qu'une méthode de même longueur que le paramètre actuel soit trouvée~ puis appelée. .

func et old risquent de dérouter ceux qui débutent dans le jeu. En fait, ce n'est pas le cas. Les fonctionnalités du langage JavaScript sont ici intelligemment utilisées. enregistré, c'est une référence à la méthode précédente. Et c'est tout nouveau à chaque fois, et l'ancien garde la référence. Qu'est-ce que c'est ? Clôture~.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vux dans un projet Vue

Comment utiliser les slots dans Vue pour distribuer le parent composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!