JavaScriptクロージャを完全理解!スコープチェインを知る(後編)

白石俊平(あゆた)
2008-08-01 20:30:00
  • このエントリーをはてなブックマークに追加

そしてクロージャを理解する

 クロージャとは、「関数自身が定義された環境を、ローカル変数も含めて持ち運ぶことのできる仕組み (またはそうした関数自体) 」の事をいいます。クロージャについては以前の記事でも触れていますので、そのコード例を抜粋しますと次のようなものです。

// 関数オブジェクトをリターンする関数
function createCounter() {
  var n = 0;
  // クロージャを作成して返す
  return function() {
    return n++;
  };
}
// createCounter()を呼び出し、
// 戻り値 (関数オブジェクト) を変数に格納しておく
var counter = createCounter();

alert(counter()); // 0が表示される
alert(counter()); // 1が表示される
...

 このコードを実行すると、counter()を呼び出すたびに値が1ずつ増加して表示されます。表示される値は、createCounter()内で宣言されたローカル変数「n」の値です。

 このようにクロージャは、「関数呼び出しが終わってもローカル変数を参照し続けられる」という驚くべき特徴を持っています。クロージャの実現方法は言語によって様々ですが、JavaScriptでは、スコープチェインの仕組みがそのままクロージャの実現へとつながっています。

 以下に示したのは、クロージャとスコープチェインの対応を表した図です。上のコードとほぼ同じですね。このコードでは、makeClosure()の中で、関数を作成して戻り値としています。makeClosure()から戻ってきた関数から、ローカル変数vの値をいつまでも参照できる、というのがクロージャの神髄です。

 この例では、戻り値となる関数が作成された瞬間に、変数オブジェクトの連鎖(スコープチェイン)が作成されます。そのチェインの中には、makeClosure()の変数オブジェクトも含まれており、ローカル変数vが格納されています。このチェインは、作成された関数がプログラム中に生存している間、ずっと保持されます。これにより、makeClosure()内で宣言されたローカル変数を、クロージャからずっと参照し続けられるという訳です。

 では、クロージャの知識を活かすとなにができるのでしょうか?

  • コメント(7件)
#1 uchima   2008-12-22 17:44:30
とても良いシリーズなのに、ここで終わってしまうのは残念で仕方ありません。ぜひとも最後までお願いします。
#2 anonymous   2009-03-21 18:24:50
わかりやすく、ためになりました。
ありがとうございました。
#3 anonymous   2009-04-30 19:36:45
変数のスコープと合わせて勉強になりました
いままで曖昧だったのですっきりです
#4 anonymous   2009-06-17 17:55:26
痒い部分や、今までどういう風に動作していたか等が理解できてとてもためになりました。
今後の執筆活動も期待しております。
ありがとうございました。
#5 anonymous   2010-10-15 16:36:23
大変役に立ちました。
#6 シロクマ。   2011-12-20 15:34:07
javascriptってすごく柔軟性のある言語なんですね。
rubyも柔軟ですが、それに匹敵しそうですね。
#7 c.c.   2015-10-27 19:18:46
JavaScriptはとても柔軟で書き方が多彩なので勉強していて面白いです
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]