Implementation method of val function overloading in jquery (with code)

The content of this article is about the implementation method of val function overloading in jquery (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The so-called overloading is a set of the same function name with different numbers of parameters. When using it, call a function name and pass in different parameters. It is decided according to the number of parameters you have. Use different functions! But we know that there is no overloading in js, because the function defined later will overwrite the previous function with the same name, but what should we do if we want to implement function overloading?

The first method:

This method is relatively simple. Give me an idea that everyone can definitely understand. It is to use the switch statement inside the function. According to the incoming parameters The number of different case statements is called, thereby achieving the effect of functional overloading.

This method is simple and crude

Second method:

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

Implementation process: Let’s take a look at the above code. The most important thing is Definition of method method: The most important point in this method is this old, this old is really clever. Its function is equivalent to a pointer, pointing to the last called method function. This may be a bit unclear. According to the code, the parsing order of js is from top to bottom.

1. Parse the method (ignore the contents first)

2. method(people, "find", function() When this sentence is executed, it will go back to execute the method defined above , then the value of old is empty at this time, because you have not defined this function, so it is undefined at this time, and then continue to execute. This is when we defined obj[name] = function(), and then found out when js parsed The fnc function is returned, and more importantly, the fnc function also calls the variables in the method. This is not a closure, because the implementation of the fnc function is only implemented when it is called, so js thinks, I have finished executing this It can’t be deleted either. Otherwise, if you want to use the one outside, just keep it first (the call function is used here to change the this pointer inside the fnc function)

　3. Okay, the first use of the method is over. , begins the second sentence, method(people,"find",function(firstname) Then when used this time, old = obj[name] needs to be executed again. What is old at this time? It is a function, because the previous statement It has been defined and not deleted, so my old this time actually points to the method defined last time. It acts like a pointer, pointing to the obj[name] defined last time. Then continue to parse, It’s a closure again, and it needs to be kept.

4. The third method call has started. Similarly, old points to the obj[name] defined last time. It is also a closure, and it needs to be kept. 5. At this point, there are actually three obj[name] in the memory, because the memory of the three methods has not been deleted. Is this realizing the coexistence of three functions? At the same time, they can also be used to old Isn’t the connection very clever?

　6. When we call people.find(), we will first call the function defined when the method was called last time. If the number of parameters is the same, it is arguments.length === fnc.length Then just execute it, and there is no need to find other functions. If they are different, then you have to use old. return old.apply(this,arguments); old points to the definition when the last method was called. function, so we go to the last search. If found, continue to execute arguments.length === fnc.length. If not found, call old again and continue searching upward. As long as you have defined it, you will definitely be able to find it. Yes Let’s go!

Summary: Use the principle of closure to make three functions coexist in memory. old is equivalent to a pointer, pointing to the last defined function. Each time it is called, it is decided whether it needs to be searched.

Follow-up: After talking about the above, compare the understanding below, you will have a deeper understanding of prototypes and prototype chains

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

Related recommendations:

Implementing functions in JavaScript Overloading and parameter default values

Jquery implements the Tab effect. The idea is js idea_jquery

How to implement the overloading of JS functions _javascript skills

The above is the detailed content of Implementation method of val function overloading in jquery (with code). For more information, please follow other related articles on the PHP Chinese website!