JavaScriptやjQueryで関数のオーバロードを擬似的に実装する
JavaやC++では関数のオーバロードを当たり前のように使っていますが、JavaScriptでは一切使っていませんでした。というか、JavaScriptでオーバロードするという考えさえ思いつきませんでした(笑)。どうやら、JavaScriptでは関数のオーバロードは無いようですが、擬似的に実現する方法はあるので、それを紹介したいと思います。
JavaやC++と同じようにやると
foo(1);
foo(1, 2);
function foo(arg1)
{
console.log('引数1個:' + arg1);
}
function foo(arg1, arg2)
{
console.log('引数2個:' + arg1 + ',' + arg2);
}
JavaやC++と同じようにやってみると、こんな感じに書けばオーバロードできるはずですよね。でも実行してみると…
引数2個:1,undefined
引数2個:1,2
引数2個:1,2
同じ関数名だとJavaScriptの場合、後に書いた方が上書きされてしまい、foo(1)を実行したときはundefinedとなってしまっています。
擬似的にオーバロードする
foo(1);
foo(1, 2);
function foo(arg1, arg2)
{
// 引数が1個の場合
if(arguments.length == 1)
{
foo1(arg1);
}
// 引数が2個の場合
else if(arguments.length == 2)
{
foo2(arg1, arg2);
}
}
function foo1(arg1)
{
console.log('引数1個:' + arg1);
}
function foo2(arg1, arg2)
{
console.log('引数2個:' + arg1 + ',' + arg2);
}
引数1個:1
引数2個:1,2
引数2個:1,2
arguments.lengthで引数の数を取得できるので、それを使って条件分岐することで擬似的に関数オーバロードを実現しています。