JavaScript 函数重载
本教程向你介绍 JavaScript 函数重载。函数重载意味着拥有多个同名函数和各种实现。但是,这个概念在 JavaScript 中不可用。
如果你有多个同名函数,则最后一个函数在 JavaScript 中执行。因此,我们使用替代方法在 JavaScript 中实现函数重载。
本教程使用 if-else
、switch
和函数表达式来完成函数重载。
在 JavaScript 中使用 if-else
语句进行函数重载
function displaySum() {
// if no argument
if (arguments.length == 0) {
console.log('No argument is passed.');
}
// if only one argument
else if (arguments.length == 1) {
console.log('You have to pass at least two arugments to perform addition.');
}
// multiple arguments
else {
let sum = 0;
let length = arguments.length;
for (var i = 0; i < length; i++) {
sum = sum + arguments[i];
}
console.log('Sum is ' + sum);
}
}
displaySum(); // call function with no parameter
displaySum(3); // call function with one parameter
displaySum(4, 5); // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8); // call function with multiple parameters
输出:
"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"
在代码片段中,我们使用 if-else
语句在 JavaScript 中进行函数重载。我们调用 displaySum()
函数,它使用不同的参数执行不同的操作。如果没有传递或传递一个参数,它会显示一条消息。
如果给定两个参数,它将添加两个数字,并使用 for
循环将多个参数中的所有值相加。arguments
是类似数组的对象,它们起着至关重要的作用,可以在函数中使用。它表示正在使用它的特定函数传递的参数
。
在 JavaScript 中使用 switch
语句进行函数重载
我们还可以在 JavaScript 中通过使用 switch
语句而不是 if-else
语句来实现函数重载。尽管两者都产生相同的输出,但使用 switch
语句的代码看起来更简洁。
function displaySum() {
switch (arguments.length) {
// if no argument
case 0:
console.log('No argument is passed.');
break;
// if only one argument
case 1:
console.log(
'You have to pass at least two arguments to perform addition.');
break;
// multiple arguments
default:
let sum = 0;
let length = arguments.length;
for (var i = 0; i < length; i++) {
sum = sum + arguments[i];
}
console.log('Sum is ' + sum);
break;
}
}
displaySum(); // call function with no parameter
displaySum(3); // call function with one parameter
displaySum(4, 5); // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8); // call function with multiple parameters
输出:
"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"
在这段代码中,我们使用 switch
语句根据各种参数完成不同的操作。你可以在此处或上一节中阅读有关 arguments
对象的信息。
在 JavaScript 中使用函数表达式进行函数重载
// Creating a class "practiceFunctionOverloading"
class practiceFunctionOverloading {
// Creating an overloadable function.
displaySum() {
// Define four overloaded functions
var functionNoParam = function() {
return 'No parameter is passed.';
};
var functionOneParam = function(arg1) {
return 'You must have at least two parameters to sum.';
};
var functionTwoParam = function(arg1, arg2) {
console.log('Sum is given below: ');
return arg1 + arg2;
};
var functionMultiParam = function(arg1, arg2, arg3) {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum = sum + arguments[i];
}
console.log('Sum is given below: ');
return sum;
};
/* the length and type of the arguments passed
( in this case an Array ) we can determine
which function to be executed */
if (arguments.length === 0) {
return functionNoParam();
} else if (arguments.length === 1) {
return functionOneParam(arguments[0]);
} else if (arguments.length === 2) {
return functionTwoParam(arguments[0], arguments[1]);
} else if (arguments.length > 2) {
return functionMultiParam(arguments[0], arguments[1], arguments[2]);
}
}
}
// Driver Code
// create an object of class practiceFunctionOverloading
var object = new practiceFunctionOverloading();
console.log(object.displaySum()); // call function with no parameter
console.log(object.displaySum(1)); // call function with one parameter
console.log(object.displaySum(2, 3)); // call function with two parameters
console.log(object.displaySum(2, 4, 5)); // call function with three parameters
输出:
"No parameter is passed."
"You must have at least two parameters to sum."
"Sum is given below: "
5
"Sum is given below: "
11
我们使用函数和函数表达式来模拟使用 JavaScript 的函数重载。这种方法的缺点是如果传递了数百个参数,代码看起来会比较混乱。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。