In object-oriented programming, many languages support function overloading and can do different operations according to different numbers and types of parameters passed by the function. However, JS does not support it, so we need to do some extra small actions.
In the JS function execution context, there is an interesting variable called arguments. It stores all the parameters passed during function execution in the form of an array, even if the function definition does not define so many formal parameters. Another special feature is that compared with the Array type, the arguments variable has and only has one length attribute. Array methods, such as push, pop, etc., do not have it. It is just a "pseudo-array": it has a length attribute, and the stored array can be accessed by the array access character [], and it is read-only and cannot be written.
1. Overloading of different numbers
It should be very clear here that you can just use the length attribute of the arguments function to judge.
The code copy is as follows:
<script type="text/javascript">
function talk(msg,handler){
var len = arguments.length;
//Execute when passing a parameter
if(len==1){
alert("Function says:"+msg);
}
//Execute when two parameters are passed
else if(len==2){
handler(msg);
}
}
talk("demo");
talk("demo",function(w){alert("Handler says:"+w);});
</script>
2. Overloading of different types of parameters
For a dynamically typed language like JS, the arbitrary nature of variable declarations downplays the importance of strict variable types in the minds of developers (PS: also based on the ECMA system, AS introduces the mandatory types of variable declarations). Many unexpected bugs are actually caused by automatic conversion of this variable type. In fact, JS provides a very accurate method to strictly detect the types of variables. The more common ones are the typeof method and constructor attribute.
1. typeof variable returns variable type
The code copy is as follows:
temp = "say"; //string
temp = 1; //number
temp = undefined; //undefined
temp = null; //object
temp = {}; //object
temp = []; //object
temp = true; //boolean
temp = function (){} //function
alert(typeof temp);
Through the above test, you can see that for null, Object, and Array, all return object types, and using the following method can solve this problem.
2.Constructor attribute detects variable type
Each object in JS has a constructor attribute, which is used to reference the function that constructs this object. By judging this reference, variable types can be detected.
The code copy is as follows:
temp = "say";
temp.constructor==String; //true
temp= {};
temp.constructor == Object;//true
temp= [];
temp.constructor == Array;//true
Through the above test, it is easy to distinguish between Array and Object type variables. Let's test the custom object to see what happens.
The code copy is as follows:
//Custom object
function Ball(){}
//Instantiate an object
var basketBall = new Ball();
basketBall.constructor==Ball; //true
This can indicate that the constructor attribute is also applicable to custom objects.
After understanding the application of the above two methods, let’s return to the simulation of JS function overloading. The following example is overloading according to the parameter type.
The code copy is as follows:
function talk(msg){
var t = typeof msg;
if(t=="string"){
alert("It's a string");
}
else if(t=="number"){
alert("It's a number");
}
}
talk(10); //It's a string
talk("demo"); //It's a number
Attached is a very clever function that strictly detects parameter types and numbers:
The code copy is as follows:
// Strictly check the type of a variable list based on the parameter list
function strict( types, args ) {
// Ensure that the number and type kernel of parameters match
if ( types.length != args.length ) {
// If the length does not match, an exception will be thrown
throw "Invalid number of arguments. Expected " + types.length + ", received " + args.length + " instead.";
}
//Travel through each parameter and check the base type
for ( var i = 0; i < args.length; i++ ) {
//If a certain type of JavaScript does not match, an exception will be thrown
if ( args[i].constructor != types[i] ) {
throw "Invalid argument type. Expected " + types[i].name +", received " + args[i].constructor.name + " instead.";
}
}
}
//Use of the above method
function doFunction(id,name){
//Detect the number and type of parameters
strict([Number,String],arguments);
..
}