JavaScript クロージャのサンプル

JavaScriptのクロージャのサンプルです。

クロージャ

  • 通常の関数の中にあるローカル変数の値は関数の処理が終了後に破棄されますが
    クロージャでは無名関数が有効の間は無名関数の中にある変数の値は保持されます。

コード

サンプルのコードです。
3行目は、test1()の実行で14行目の無名関数が戻り値になり変数fに代入されます。
14行目は、無名関数をreturnしています。
5行目は、returnされた無名関数の内容が表示されます。
8-10行目は、無名関数を実行しています。
無名関数が変数の値を保持しているため1,2,3が出力されます。

<script>
function click1(){
	var f =  test1();

	document.write(f); 
	//function (){ x = ++i;	//1を加えてから値を返す alert(x); }が出力

	f();  // 1を表示
	f();  // 2を表示
	f();  // 3を表示
}
function test1(){
	var i = 0;
	return function (){
		x = ++i; //1を加えてから値を返す
		alert(x);
    };
}
</script>
<body >
<input type="button" value="ボタン" onClick="click1()">
</body>

以下は、MDNの関数のページのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

関連の記事

JavaScript 無名関数と即時関数のサンプル
JavaScript 高階関数のサンプル
JavaScript エスケープシーケンスのサンプル
JavaScript 例外処理のサンプル(try...catchとthrow)
JavaScript 変数の巻き上げのサンプル



△上に戻る