JavaScript 関数のオーバーロード
Mehvish Ashiq
2023年10月12日
-
JavaScript で
if-elseステートメントを使用して関数のオーバーロードを実行する -
JavaScript で
switchステートメントを使用して関数のオーバーロードを実行する - 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() 関数を呼び出します。この関数は、さまざまなパラメーターでさまざまに実行されます。パラメータが渡されないか 1つ渡されると、メッセージが表示されます。
2つのパラメーターが指定されている場合は、2つの数値を加算し、for ループを使用して複数のパラメーターのすべての値を加算します。引数は、重要な役割を果たし、関数内で使用できる配列のようなオブジェクトです。これは、それが使用されている特定の関数に渡された引数を表します。
JavaScript で switch ステートメントを使用して関数のオーバーロードを実行する
if-else ステートメントの代わりに switch ステートメントを使用して、JavaScript で関数のオーバーロードを実装することもできます。どちらも同じ出力を生成していますが、コードは 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 を使用した関数のオーバーロードをシミュレートします。このアプローチの欠点は、何百ものパラメーターが渡された場合にコードが乱雑に見えることです。
著者： Mehvish Ashiq
