MENU

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

同じ関数名だと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

arguments.lengthで引数の数を取得できるので、それを使って条件分岐することで擬似的に関数オーバロードを実現しています。