Explication détaillée des étapes pour appeler le cache pour implémenter la méthode JS

Cette fois, je vais vous donner une explication détaillée des étapes pour appeler le cache pour implémenter la méthode JS. Quelles sont les précautions à prendre pour appeler le cache pour implémenter la méthode JS Ce qui suit est un cas pratique, allons-y. jetez un oeil.

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 paramètres différents. Le type ou nombre de paramètres.

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 surcharge de fonctions/méthodes, mais js fournit un paramètre de méthode appelé arguments. Vous pouvez obtenir la longueur des paramètres de la méthode via l'attribut length de ce paramètre. D'ailleurs, ce qui est implémenté aujourd'hui n'est qu'une surcharge en fonction de la longueur du paramètre, pas du type de paramètre ~~·length,

Quant au téléchargement, une fois la longueur du paramètre de méthode disponible, une méthode d'écriture de commutateur plus courante 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~ car chaque corps de méthode est sous un cas, ou est mentionné séparément Écrivez-le sous forme de fonction~

Mais ceux-ci sont mauvais~pas faciles à maintenir et pas assez élevés~Alors, comment devrions-nous gérer avec élégance le 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

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

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

et func 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~. old

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 :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

vue +vue-router+autorisations d'opération vuex

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!