In JavaScript, function function is an object.
There is no method overload in JS
In JavaScript, there is no concept of method (function) overloading.
example:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
function add(number)
{
alert(number + 20);
}
function add(number, number1)
{
alert(number + 30);
}
add(10);
</script>
</head>
<body>
</body>
</html>
The bullet box in the web page shows 40.
Explanation Although the second method is two parameters, it is still called.
After exchanging the order of the two methods, the pop-up box displays 30. It can be seen that regardless of the number of parameters, the following method with the same name is called.
How to explain this phenomenon?
This is because the function declaration actually creates an object:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
function add(number)
{
alert(number + 20);
}
/*
The above function is equivalent to:
var add = function(number)
{
alert(number + 20);
}
*/
function add(number, number1)
{
alert(number + 30);
}
/*
The above function is equivalent to:
var add = function(number, number1)
{
alert(number + 30);
}
*/
add(10);
</script>
</head>
<body>
</body>
</html>
In this way, add actually points to the subsequent object, and the parameters assigned when the method is called will be assigned to the method formal parameters in order, and the parameters that are not assigned afterwards are undefined.
When calling JavaScript functions, there is no strict check of the number of parameters. It is OK to have the actual number of parameters smaller than the number of formal parameters. The formal parameters that are not assigned are undefined values.
It is also possible that the number of real parameters is greater than the number of formal parameters. In this way, only the previous actual parameters will be used, and the additional actual parameters will not be used.
Function object
There is a Function object in JavaScript, and all custom functions are of Function object type.
All parameters received by the Function object are of string type, the last parameter is the function body to be executed, and the previous parameter is the parameters that the function really needs to receive.
example:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
var add = new Function("number", "number1", "alert(number + number1);");
var add = new Function("number", "alert(number + 20);");
add(10, 30);
</script>
</head>
<body>
</body>
</html>
Implicit object arguments
In JavaScript, each function has an implicit object arguments, representing the parameters actually passed to the function.
arguments have nothing to do with the formal parameters of the function and their number.
arguments has a useful attribute length, indicating the length of the actual parameter. You can use this to simulate the overload of the function:
Exercise examples:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
function add(number1, number2)
{
alert(arguments.length);
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
}
//add(2, 3, 4);
function add2()
{
if(1 == arguments.length)
{
alert(arguments[0]);
}
else if(2 == arguments.length)
{
alert(arguments[0] + arguments[1]);
}
else if(3 == arguments.length)
{
alert(arguments[0] + arguments[1] + arguments[2]);
}
}
add2(3);
add2(3, 4);
add2(3, 4, 5);
</script>
</head>
<body>
</body>
</html>
Each function object has a length attribute, indicating the parameter format that the function expects to receive.
It is different from the arguments of the function. arguments.length represents the number of parameters actually received by the function.
example:
The code copy is as follows:
<html>
<head>
<script type="text/javascript">
var add = function(num, num2, num3)
{
alert(num + num2 + num3);
}
alert(add.length); //Output 3
add(1, 2, 3);
var add2 = function()
{
}
alert(add2.length); //Output 0
</script>
</head>
<body>
</body>
</html>