クロージャを切ない恋物語で理解する

クロージャがいまいちわからない。
言葉の意味は「閉包」。
って何?!

イメージ的には、変数の変化を受けない閉ざされたもの、とゆう感じでしょうか。

たとえば魔法瓶の中のお茶。
たとえば東京に来ても東京弁に染まらない大阪人。
たとえば伝統の味を守り続ける老舗の和菓子屋。

うん、こっちのほうがわかりやすい。

というわけで、クロージャのサンプルをストーリー仕立てでお送りします。

<h1>クロージャ留学物語</h1>

<h2>高校卒業式にて</h2>
<p>カズマ「<span id="kazumaGag1"></span>」</p>
<p>カズコ「<span id="kazukoGag1"></span>」</p>

<h2>それから2年後</h2>
<p>カズマ「<span id="kazumaGag2"></span>」</p>
<p>カズコ「<span id="kazukoGag2"></span>」</p>

出力用のHTMLは上記のとおり。
※クロージャのサンプルです

// ==========================================================
// 出会った頃
// ==========================================================
// 高校に入ってすぐ、カズマとカズコは仲良くなった。
// あの頃の二人に、違いなんてなかった。
var kazuma, kazuko;

// 流行りのギャグなんて言いながら、笑い合ってたんだ。
var omoroo = "3.14159‥おっぱい!"; // おっぱい先生

スクリプトの下準備はこんな感じ。
とりあえず変数宣言をします。
※クロージャのサンプルです

// ==========================================================
// 今は、さよなら
// ==========================================================
// やがて二人には、進路選択のときがやってくる。
var Ryugaku = function () {
	var o = {};
	var myOmoroo = omoroo; // クロージャの変数設定タイミングはここ
	o.gag = function() {
		return myOmoroo;
	};
	return o;
}
var Shushoku = function () {
	var o = {};
	o.gag = function() {
		var myOmoroo = omoroo; // 普通の関数の変数設定はここ
		return myOmoroo;
	};
	return o;
};

// カズマは留学を、、カズコは就職を選んだ。
kazuma = new Ryugaku();
kazuko = new Shushoku();

// お互い、成人式には再会して、酒でも飲もうよって笑顔で別れたんだ。
document.getElementById("kazumaGag1").innerHTML = kazuma.gag();
document.getElementById("kazukoGag1").innerHTML = kazuko.gag();

はい、ついてきていただいているでしょうか?
留学、就職それぞれのクラスを作って、カズマとカズコに初期化させています。

このときの2人のギャグは「3.14159‥おっぱい!」ですね。
杉山えいじさんのおっぱい先生ですね。
なつかしいですね。
もうちょっとなんでがんばってついてきてくださいね。

// ==========================================================
// 会えない時間
// ==========================================================
// 2年間、二人は連絡をとらなかった。
// お互いが新しい環境に精いっぱいだった。
//
// けれどもちろん、お互いのことを忘れていたわけではない。
// 二人でよく見た三日月が出るたびに、
// 離れ離れになった恋人に思いを寄せたんだ。
//
// でも、時間は確実に過ぎていく。
// 留学したカズマが知らないギャグが、日本では流行っていた。
omoroo = "ワイルドだろぅ?"; // ワイルドスギちゃん

はい、ここで変数 omoroo がスギちゃんに変わってますね。
日本で就職したカズコ(普通の関数)は呼び出されるたびにこの変数を参照するのですが、
留学中のカズマ(クロージャ)は初期化のときの値を保ち続けます。

// ==========================================================
// 再会の時
// ==========================================================
// 長くて短い2年が過ぎて、二人は再会した。
// 2年間のブランクに、ぎこちなく笑う二人。
document.getElementById("kazumaGag2").innerHTML = kazuma.gag();
document.getElementById("kazukoGag2").innerHTML = kazuko.gag();

// 新しい環境、新しい考え方。
// カズマはやけに大人びたカズコに、
// カズコは子供っぽいままのカズマに、違和を感じ始めていた。
//
// 若い貴重な2年間を別々の環境で過ごした二人に、
// 別れが訪れるのは時間の問題だった‥‥


これを実行すると以下のような結果が得られます。

クロージャ留学物語

高校卒業式にて
カズマ「3.14159‥おっぱい!」
カズコ「3.14159‥おっぱい!」

それから2年後
カズマ「3.14159‥おっぱい!」
カズコ「ワイルドだろぅ?」

卒業式(初期化)の直後では二人ともおっぱい先生を参照しているのですが、
2年後(変数 omoroo 変更後)はカズコはスギちゃん、
カズマは留学当時のおっぱい先生のままですね。

以上がクロージャです(真顔)。


ちゃんと動くよ↓
サンプルページ


あと留学から帰ってきたときに、日本のお笑いがまったくわからなくなってるのは実話です。