十一章第二回　bind

このページの最終更新日：2017年9月14日

今回の記事は短いです。今回はbindというメソッドを1つだけ紹介します。bindは九章第五回でちらっと出てきたもので、ある関数が呼ばれたときのthisの値を固定するためのメソッドです。

次の単純な例を見てみましょう。

function showThis(){
  console.log(this);
}

var foo = showThis.bind("菅直人");

foo();

"菅直人"と表示されるはずです。つまり、showThis内でthisが"菅直人"になっていたのです。

この例から分かるように、bindの戻り値は新しい関数です。その関数は元の関数と同じ動作をしますが、thisの値はbindに渡された値に固定されています。以前に述べた通り、thisの値はどのように関数が呼ばれたかによって変わります。bindによって作られた関数は、どのように呼ばれてもthisの値が固定されています。

bindの戻り値は、もとの関数（この場合showThis）と同じ関数なのですが、その中でのthisの値が指定したもので固定されています。

thisが全く無関係なおかしな値になっても嬉しいことはあまりありませんが、コールバック関数の中でも外側のthisの値を使いたい場合など、thisの値を保存したい場合には役に立ちます。

bindによる引数の固定

実は、bindにはもう1つ機能があります。bindはthisだけでなく引数も固定できます。次のサンプルを見てください。

function sum(x,y,z){
  return x+y+z;
}

var foo = sum.bind(null,10);

console.log(foo(20,30));

関数sumは3つの引数を足して返す関数です。まず、今回のbindの第1引数はnullです。bindにnullを渡した場合はthisは固定されず、通常通りとなります。今回のポイントは第2引数で、これはsumの第1引数、すなわちxを固定します。

これにより、sum.bindが返した関数fooはsumと同じ働きをするものの引数xが10に固定されたものになります。つまり、fooの第1引数はsumの引数yに、第2引数はzに入ります。その結果、foo(20,30)が60となりました。

bindには第3引数以降も渡すことができ、その場合はもとの関数の第2引数以降が順に固定されていきます。