JavaScriptの技法：高度な関数の活用

　JavaScriptの関数を用いると、一連の手順をまとめ、簡単に特定のタスクを実行したりクラスのコンストラクタとして動作させることが可能になる。JavaScriptの基本的な関数についてのドキュメントはインターネット上に多数存在するが、それよりもむしろ、高度な関数の機能について調べてみよう。本稿を読んで、再帰やそれ以外の高度な機能を利用するために必要な洞察力を高めていただきたいと思う。

　難しい話題に入る前に、JavaScriptで関数を定義するにはどのような方法があるのか見てみよう。

JavaScriptで関数を定義する方法

　JavaScriptでは以下のような3種類の方法で関数を定義することができる。

• function文を用いた定義
• Function()コンストラクタを用いた定義
• functionリテラルによる定義

　ここでは、addという関数を作成することによって、これら3つのアプローチを紹介しよう。add関数は、2つの引数を受け取ってそれらを足し、その結果を返すものとする。

　リストAでは、もっとも一般的なfunction文を用いた関数の作成方法を示している。また、リストBではFunction()コンストラクタを用いた関数の作成方法を示している。ちなみに、私はFunction()コンストラクタをonChangeやonClickなどのようなイベントハンドラとして使用している。Function()コンストラクタを利用するメリットは、thisキーワードの使用が可能になることだ。thisキーワードは、関数を呼び出したオブジェクトの参照として振る舞う。thisを用いると、関数に呼び出し元のオブジェクトを渡すことが可能になるのである。最後に、リストCでは関数をリテラルとして定義する方法を示している。また、JavaScriptの関数は文字列でもあることも示している。つまり、

xyzzy = add; alert(xyzzy(2,2))

　このようなコードは、次のコードと同じ結果を出力するのである。

alert(add(2,2))

　関数をリテラルとして定義するメリットは、サーバサイドのJavaScript関数をクライアントサイドにコピーできるようになることだ。

リストA

function add(x,y) {
       return x + y;
}

リストB

var add = new Function('x','y','return x + y;');

リストC

var add = function(x,y) {return x + y;};

　さて、基礎については詳しく説明したので、次にJavaScriptのより高度な応用について見てみよう。