As we all know, the so-called overloading, is a set of the same function name, different number of arguments, when using a function name, pass in different parameters, according to your number of arguments, to decide to use different functions! Overloading works really well in classic programming languages like JAVA, where you can call the same method name with different parameters and do whatever you want.
But we know there are no overloads in JavaScript (why not? Does JavaScript have features that aren’t JAVA? “, because the function defined later overwrites the previous function of the same name, but overloading is so easy. What if we want to implement function overloading in JavaScript?
Today I’m going to give you two ideas about how to implement function overloading in JavaScript. (Sorry, zero foundation students, this article is not suitable for you, need some object-oriented foundation.)
The first method:
This method is relatively simple, to a train of thought, we must be able to understand, is the internal function of the switch statement, according to the number of incoming parameters to call different case statements, so as to achieve the effect of overload function.
This method is simple and crude. But for a person who is learning JS, this method is too perfunctory. (So how does being unskilled make me a front-end developer?)
The following focuses on the second kind, to be honest, I read the first time very difficult, read an hour to clear, because some knowledge points although read but not familiar with. (Dry goods are enough, don’t be distracted)
The second method:
So in our example, if you pass in no arguments, it will print all the people, if you say firstname, it will print all the people that match, if you say full name, it will print all the people that match. If using reloading, the user experience is really good (this example is from the Internet when I used to learn, very classic, representative, but they did not write the implementation process, so today I will tell you about it).
Thought: This code must be confused at first glance, then confused at second glance.
In fact, this approach is a clever use of JavaScript’s closure principle (important), since the function after JS overwrites the previous function of the same name, I force all functions to remain in memory until I need to find them.
With this in mind, you might think of closures, where variables inside a function are accessed from outside the function, keeping the function in memory from being deleted. This is the core of closures.
Implementation process:
The most important thing about this method is the old one, which is really neat. It acts as a pointer to the method function that was last called.
1. What’s in the method?
2. Method (people,”find”,function()) returns to the method defined above, and old is null because you haven’t defined this function yet, so it’s undefined.
Then we continue, at which point we define obj[name] = function().
Then returned in js while on a resolution as FNC function, more important is as FNC function also calls the method the variable inside, inside the closure is!
The FNC function is implemented only when it is called, so js thought, “I can’t delete it after I execute it, or I can keep it for now.”
Method (people,”find”,function(firstname) old = obj[name]
Old refers to the method defined last time. It acts as a pointer to obj[name] defined last time.
And then I go down and parse, again, closure, and I have to keep it.
Obj [name] = obj[name] = obj[name] = obj[name]
Method [name] = obj[name]; method [name] = obj[name]; method [name] = obj[name]; method [name]
Function (arguments.length === fnC. length); function (arguments.length == fnC. length); Return old.apply(this,arguments);
Length === fnc.length (arguments.length == fnC. length);
Conclusion: The principle of closure is used to make the three functions coexist in memory. Old is equivalent to a pointer pointing to the function defined last time. Each time it is called, it is determined whether to find it or not.
Finally, take a look at the execution output:
This is easy to see in the implementation: first, old is not a function when it is called for the first time, so instance is judged to be false and will be true if it continues.
Then, we call method in the order from no arguments to two arguments, so we call find first, which is defined on the last method call, so the length of FNC is 2. And then I go up, length is 1, and finally I find length is 0 and I do it and I print it.
Well, that’s all for today! If you also like, forward to more friends to learn it!