Implementierungsmethode zum Überladen von Val-Funktionen in JQuery (mit Code)

In diesem Artikel geht es um die Implementierungsmethode der Val-Funktionsüberladung in JQuery. Ich hoffe, dass er für Sie hilfreich ist.

Die sogenannte Überladung ist ein Satz desselben Funktionsnamens mit unterschiedlicher Anzahl von Parametern. Wenn Sie ihn verwenden, wird ein Funktionsname aufgerufen und unterschiedliche Parameter übergeben Welche Parameter Sie haben, nutzen Sie unterschiedliche Funktionen! Wir wissen jedoch, dass es in js keine Überladung gibt, da die später definierte Funktion die vorherige Funktion mit demselben Namen überschreibt. Was sollten wir jedoch tun, wenn wir eine Funktionsüberladung implementieren möchten?

Die erste Methode:

Diese Methode ist relativ einfach und kann von jedem verstanden werden, d. h. die Verwendung der switch-Anweisung innerhalb der Funktion Die Anzahl der Aufrufe verschiedener Case-Anweisungen durch eingehende Parameter führt zu einer funktionalen Überlastung.

Diese Methode ist einfach und grob

Zweite Methode:

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

Implementierungsprozess: Schauen wir uns den obigen Code an. Das Wichtigste ist Definition der Methodenmethode: Der wichtigste Punkt dieser Methode ist, dass diese alte Methode wirklich clever ist. Seine Funktion entspricht einem Zeiger, der auf die zuletzt aufgerufene Methodenfunktion zeigt. Laut Code ist die Analysereihenfolge von js von oben nach unten.

1. Analysieren Sie die Methode (ignorieren Sie zuerst den Inhalt)

2. method(people, "find", function() Wenn dieser Satz ausgeführt wird, kehrt er zurück, um die Methode auszuführen Wenn Sie oben definiert haben, ist der Wert von old zu diesem Zeitpunkt leer, da Sie diese Funktion noch nicht definiert haben, sodass sie zu diesem Zeitpunkt undefiniert ist. Anschließend wird mit der Ausführung fortgefahren. Dies ist der Zeitpunkt, an dem wir obj[name] = function() definiert haben. und dann herausgefunden, wann js analysiert wird Die FNC-Funktion wird zurückgegeben, und was noch wichtiger ist, die FNC-Funktion ruft auch die Variablen in der Methode auf. Dies ist kein Abschluss, da die Implementierung der FNC-Funktion nur dann implementiert wird, wenn sie aufgerufen wird js denkt, ich habe die Ausführung abgeschlossen. Es kann auch nicht gelöscht werden. Andernfalls behalten Sie es einfach bei, wenn Sie es außerhalb verwenden möchten (die Aufruffunktion wird hier verwendet, um den Zeiger this innerhalb der FNC-Funktion zu ändern)

3. Okay, die erste Verwendung der Methode ist vorbei, der zweite Satz beginnt, method(people,"find",function(firstname) Wenn er dieses Mal verwendet wird, muss old = obj[name] sein Was ist zu diesem Zeitpunkt alt? Da die vorherige Anweisung nicht gelöscht wurde, zeigt sie tatsächlich auf die zuletzt definierte Methode. Sie verhält sich wie ein Zeiger, der auf das Objekt zeigt. name] wurde beim letzten Mal definiert und wird dann erneut analysiert. Er muss beibehalten werden.

4. Der dritte Methodenaufruf beginnt auf die gleiche Weise . Es ist auch ein Abschluss und muss daher beibehalten werden.

5. Zu diesem Zeitpunkt befinden sich tatsächlich drei obj[name] im Speicher, da der Speicher der drei Methoden nicht gelöscht wurde Dies bedeutet, dass die drei Funktionen koexistieren können und auch mit alten Funktionen verwendet werden können. Ist es nicht clever, sie zu verbinden?

6. Wenn wir people.find() aufrufen, rufen wir zuerst die definierte Funktion auf Wenn die Methode zuletzt aufgerufen wurde, ist sie gleich arguments.length === fnc.length Führen Sie sie dann einfach aus, und Sie müssen keine anderen Funktionen finden Um old.apply(this,arguments) zu verwenden, verweisen wir auf die Definition, als die letzte Methode aufgerufen wurde. Wenn gefunden, fahren Sie mit der Ausführung von arguments.length === fort. Wenn Sie es nicht finden, rufen Sie es erneut auf und suchen Sie weiter nach oben. Ja, los geht's! Die Koexistenz von drei Funktionen im Speicher entspricht einem Zeiger, der auf die zuletzt definierte Funktion zeigt. Bei jedem Aufruf wird entschieden, ob sie durchsucht werden muss.

Follow-up: Nachdem Sie über das Obige gesprochen haben, vergleichen Sie das Verständnis unten, Sie werden ein tieferes Verständnis von Prototypen und Prototypketten haben

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')

Verwandte Empfehlungen:

Implementieren von Funktionen in JavaScript-Überladung und Parameter-Standardwerten

Jquery implementiert den Tab-Effekt. Die Idee ist js idea_jquery

Anleitung Implementieren Sie die Überladung von JS-Funktionen. _Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum Überladen von Val-Funktionen in JQuery (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!