uhyohyo.net

JavaScript初級者から中級者になろう

十一章第二回 bind

もう1つ便利なのがbindです。bindは九章第五回でちらっと出てきたもので、ある関数が呼ばれたときのthisの値を固定するというもので、関数が持つメソッドです。

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

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

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

foo();
          

「菅直人」がログされます。すまり、showThis内で、thisが"菅直人"になっていたのです。

ここで、bindの戻り値fooを関数として呼んでいることから分かるように、bindの戻り値もまた関数です。

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

これは、setTimeoutや、addEventListenerなどのコールバック関数として、this値に依存する関数を使用したい場合に有用です。

bindによる引数の固定

実は、bindには他にも機能があります。それは、その関数を呼び出す際に、thisだけでなく引数も固定できるということです。次のサンプルを見て下さい。 function sum(x,y,z){ return x+y+z; } var foo = sum.bind(null,10); console.log(foo(20,30));

まず、bindに第二引数が付いています。今回、もととなる関数sumにthisは出てこないので、bindの第一引数はnullとしています。

それでできた関数fooはsumと同じはたらきをするはずですが、引数を2つしか渡していません。それで、返ってくる値は60です。

何が起きているかというと、bindの第二引数である10が、fooを呼び出すときの第一引数として固定されたのです。

だから、foo呼び出し時に、関数本体であるsumの第一引数xには常に10が渡されます。残りの2つの引数は、fooの呼び出し時の引数がそのまま流れていきます。

たまに使いどころがあることでしょう。