Méthode d'implémentation de la surcharge de la fonction val dans jquery (avec code)

Ce que cet article vous apporte concerne la méthode d'implémentation de surcharge de la fonction val dans jquery (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La soi-disant surcharge est un ensemble du même nom de fonction avec un nombre différent de paramètres. Lors de son utilisation, appelez un nom de fonction et transmettez différents paramètres. paramètres dont vous disposez. Utilisez différentes fonctions ! Mais nous savons qu'il n'y a pas de surcharge dans js, car la fonction définie plus tard écrasera la fonction précédente du même nom, mais que devons-nous faire si nous voulons implémenter une surcharge de fonction ?

La première méthode :

Cette méthode est relativement simple. Donnez-moi une idée que tout le monde peut comprendre, c'est-à-dire utiliser l'instruction switch à l'intérieur de la fonction, selon. les paramètres entrants Le nombre d'instructions de cas différentes est appelé, obtenant ainsi l'effet de surcharge fonctionnelle.

Cette méthode est simple et grossière

Deuxième méthode :

function method(obj,name,fnc){
            var old = obj[name];
            console.log(old instanceof Function);
            obj[name] = function(){
                console.log(arguments.length+" "+fnc.length);
                if(arguments.length === fnc.length){
                    return fnc.apply(this,arguments);
                }else if(typeof old === "function"){
                    return old.apply(this,arguments);
                }
            }
        }
        var people = {
            values:["Zhang san","Li si"]
        };
        method(people,"find",function(){
            console.log("无参数");
            return this.values;
        })
        method(people,"find",function(firstname){
            console.log("一个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i].indexOf(firstname) === 0){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        method(people,"find",function(firstname,lastname){
            console.log("两个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i] == firstname + " " + lastname){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        console.log(people.find());
        console.log(people.find("Zhang"));

Processus d'implémentation : Jetons un coup d'œil au code ci-dessus, le plus l'important c'est la définition de la méthode : le point le plus important dans cette méthode c'est ce vieux, ce vieux est vraiment intelligent. Sa fonction est équivalente à un pointeur, pointant vers la fonction de méthode qui a été appelée en dernier. Cela peut être un peu flou. D'après le code, l'ordre d'analyse de js est de haut en bas.

1. Analyser la méthode (ignorer d'abord le contenu)

2. method(people, "find", function() Lorsque cette phrase est exécutée, elle reviendra pour exécuter la méthode défini ci-dessus, alors la valeur de old est vide pour le moment, car vous n'avez pas défini cette fonction, elle n'est donc pas définie pour le moment, puis continuez à s'exécuter. C'est à ce moment-là que nous avons défini obj[name] = function(), puis découvert lorsque js a analysé La fonction fnc est renvoyée, et plus important encore, la fonction fnc appelle également les variables dans la méthode. Ce n'est pas une fermeture, car l'implémentation de la fonction fnc n'est implémentée que lorsqu'elle est appelée, donc. js pense, j'ai fini d'exécuter ceci. Il ne peut pas non plus être supprimé. Sinon, si vous souhaitez utiliser celui à l'extérieur, conservez-le d'abord (la fonction d'appel est utilisée ici pour changer le pointeur this à l'intérieur de la fonction fnc)

3. D'accord, la première utilisation de la méthode est terminée, commence la deuxième phrase, method(people,"find",function(firstname) Ensuite, lorsqu'il est utilisé cette fois, old = obj[name] doit être exécuté à nouveau. Qu'est-ce qui est ancien à ce moment-là ? C'est une fonction, car l'instruction précédente Elle a été définie et non supprimée, donc mon ancienne pointe en fait vers la méthode définie la dernière fois. Elle agit comme un pointeur, pointant vers l'obj[. name] défini la dernière fois, puis continue l'analyse. C'est encore une fermeture, elle doit être conservée

4. Le troisième appel de méthode démarre de la même manière, old pointe vers l'obj[name] défini la dernière fois. . C'est aussi une fermeture, donc il faut la conserver

5. À ce stade, il y a en fait trois obj[name] dans la mémoire, car la mémoire des trois méthodes n'a pas été supprimée. cela signifie que les trois fonctions peuvent coexister, et elles peuvent également être utilisées avec des anciennes. N'est-il pas astucieux de les connecter

6. Lorsque nous appellerons people.find(), nous appellerons d'abord la fonction définie ? lorsque la méthode a été appelée pour la dernière fois, si le nombre de paramètres est le même, c'est arguments.length === fnc.length Ensuite, exécutez-le, et il n'est pas nécessaire de trouver d'autres fonctions. Si elles sont différentes, alors vous avez. pour utiliser old. return old.apply(this,arguments); old pointe vers la définition lorsque la dernière méthode a été appelée, nous passons donc à la dernière recherche, si elle est trouvée, continuons à exécuter arguments.length === fnc. longueur. S'il n'est pas trouvé, appelez à nouveau old et continuez à chercher vers le haut. Tant que vous l'aurez défini, vous pourrez certainement le trouver

Résumé : Utilisez le principe de fermeture pour faire. trois fonctions coexistent en mémoire. old équivaut à un pointeur, pointant vers la dernière fonction définie, il est décidé si elle doit être recherchée.

Suivi : Après avoir parlé de ce qui précède, comparez la compréhension ci-dessous, vous aurez une compréhension plus approfondie des prototypes et des chaînes de prototypes

var array=[]
addMethod(array,'sub0',function(){
  return 0;
})
addMethod(array,'sub0',function(prefix){
  console.log("prefix===>",prefix);
  return prefix[0];
})
array.sub0([1,2,3,5])  //这里是array对象拥有了sub0这样的方法，而不是Array，addMethod是继承

// 区别于方法直接作用于原型上
//例子  String的 startsWith 实现
function addstartsWithToString(){
   if (typeof String.prototype.startsWith1 != 'function' ) {
     String.prototype.startsWith1 = function(subString){
       return this.slice(0,subString.length)==subString
     }
   }
}

addstartsWithToString();
'120000'.startsWith1('1')

Recommandations associées :

JavaScript Implémente la surcharge de fonctions et les valeurs par défaut des paramètres

Jquery implémente l'effet Tab L'idée est js idea_jquery

Comment. pour implémenter les fonctions JS Conseils Reloading_javascript

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!