クロージャー

クロージャーはJavaScriptの難関の一つと思われがちですが、JavaScriptをマスターするためには避けては通れない場所です。個人的には、スコープの概念さえきちんと理解していれば、そのスコープを管理するための非常に便利なツールとして目に映る日が来るはずです(きっとw)。なので、もしスコープとか名前空間がいまいち。。。って人は、先にここらへんを勉強するといいかもです。

ただ、説明したり、言語がしたりするのは難しいかもしれませんが、クロージャーを作って、使うのは全然難しくはありません。ぜひ、苦手意識や先入観を一旦忘れて学んでみてください!


function User(){
    // private member
    var name = "Jason";

    // public member
    this.getName = function(){
        return name;
    };
}

var user01 = new User();

// 直接プライベートメンバにはアクセス出来ない
console.log(user01.name); // -> undefined

// パブリックメソッド経由でプライベートメンバにアクセスする
console.log(user01.getName()); // -> "Jason"

ここで重要な事は、 「コード内のプライベートメンバ(ここではname)には、外側から参照できない」 そして 「コード内のプライベートメンバ(ここではname)を参照するには、パブリックメソッド(ここではgetName)を経由するしかない」

ということです。これによって、プライベートな変数として 定義することができたり、変数事のスコープを自由自在に操れるようになります。

クロージャーをいつ使うのか

artgearさんが私が今までクロージャを理解できなかった理由というブログで書いていますが、最初は自分も全く同じ気持でした。

「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。

例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない?」 って教えてあげますよね。

これと同じように友人が 「○○○○○○なんだよ、うまい方法ない?」 と質問して来た時に 「そういう時はクロージャを使えばいいよ」 と答えてあげるべき○○○○○○は何なのか。

クロージャーを使えるタイミングはたくさんあります(自分がまだまだ知らないタイミングもきっとたくさんあると思います)が、とりあえず、ひとつ覚えておきましょう。それは、

「メソッドを 1 つだけ持つオブジェクトを使いたくなるような状況ならば、どんな時でもクロージャを使う事ができる」 という時です。

詳しくは、MDNに書いてあります。本記事では、テキストサイズを調整する際に、クロージャーを用いています。


function makeSizer(size){
    return function(){
        document.body.style.fontSize = size + 'px';
    }
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

(詳細はMDNによるJSFiddleより)

参考リンク

説明がとてもわかりやすい、秀逸な記事ふたつを紹介します。