読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

JavasScriptのクロージャについておさらい

JavaScript

JavaScriptクロージャについて、おさらいします。

 

developer.mozilla.org

 

 

習うより慣れろということで、こんなコードを書きました。

f:id:chuck0523:20150918014820p:plain

 

makeFunc という関数があり、変数と関数を1つずつ定義しています。そして、その返却値は関数そのものです。

コンソールで出力すると、関数そのものが格納されていることが分かります。

f:id:chuck0523:20150918015223p:plain

 

そして24行目でmyFuncを実行すると、格納されたdisplayNameが実行されて、nameが返されます。つまり、chuckが表示されます。

 

でも、ちょっと引っかかるものがあります。

なぜなら、ローカル変数の生存期間は、その関数が実行されている間だけです。24行目の時点ではdisplayNameを呼んでいるのであって、関数makeFuncおよび変数nameはもう無関係のはず…??

 

この疑問への答えがクロージャです。

myFuncはmakeFunc()という関数のみならず、その関数が作成された環境も保存しているのです。これを"myFuncがクロージャになった"という言い方をします。

よって、makeFunc内のnameには"chuck"が保持されています。なるほど…。

 

さらに、クロージャを使った面白い例があります。

関数ファクトリです。

f:id:chuck0523:20150918020746p:plain

makeAdderは関数を返すためだけの関数です。

つまり、40, 41行目のように、ある引数を渡してそれを反映した関数を返すのです。

40行目では5を渡しています。makeAdderのxにあたります。その結果、makeAdder内部の関数のreturn x + yのx に5 が保存されます。そして 5 + y を戻り値として持つ関数がadd5に格納されます。

41行目の処理もまったく同様で、この場合はx が10となります。

 

なので、43, 44行目で2を引数に渡して出力をすると、違った結果が表示されます。

ちなみに、引数として与えた2はyとして処理されます。

 

クロージャ、なんとなく分かった気になってましたが、なかなか面白いですね…。

 

ここまでが基本的な使い方で、次回は実践的な使い方について書いていきたいと思います。

 

 

書いたコード

gist96729b2668af1a44592f