Edited at

JavaScriptでクロージャ入門。関数はすべてクロージャ?

More than 3 years have passed since last update.

JavaScriptでは関数はすべてクロージャです。

ではそもそもクロージャってなんなんでしょうか。


クロージャ??

クロージャの簡単な定義として

「自分を囲むスコープにある変数を参照できる関数」

が挙げられます。

言葉ではパッとしないかもしれませんが、コードを一つづつ追っていくと、

入門としてのクロージャは簡単に理解できます。


スコープ

まずJavaScriptは関数ごとにスコープが作られます。

スコープとは変数を参照できる範囲のことです。

その範囲外では変数は参照できません。

function func() {

var value = 1;
console.log(value);
}
func(); // 1
console.log(value); // undefined


クロージャの例

ここでクロージャの例を見てみましょう

function func() {

var value = 1;

function innerFunc() {
console.log(value);
}
innerFunc();
}
func(); // 1

先ほどの定義を思い出してみましょう。

「自分を囲むスコープにある変数を参照できる関数」

内側の関数が外側の関数の変数を参照できています。

ここで重要なのは、値のコピーではなく、参照ができていることです。

ですから、ここでは下記のようにvalueの変更が可能です。

function func() {

var value = 1;

function innerFunc() {
value++;
}
innerFunc();
console.log(value); // 2
}
func();


クロージャの実践例

ここで基本的なクロージャの実践例として一つ、

「モジュールパターン」を紹介します。

クロージャの一つの利点として、

変数をプライベートな変数として扱う事ができるようになります。

var module = (function() {

var count = 0;

return {
increment: function() {
count++;
},
show: function() {
console.log(count);
}
};

})();

module.show(); // 0

module.increment();
module.show(); // 1

console.log(count); // undefined

即時関数を用いてオブジェクトを生成しています。

moduleにはreturnされているオブジェクトが代入されます。

ここで重要な事として、

即時関数内のcountに関しては内側からしか参照できないという事です。

外側からアクセスしようとした場合にはもちろん「undefined」となります。

これによりプライペードな変数として扱う事が可能になります。


外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。

Twitterはこちら

Feedlyのフォローはこちら


おすすめの記事

JavaScriptはオブジェクト指向?プロトタイプベースのオブジェクト指向を学ぶなら。

JavaScriptのプロトタイプからオブジェクト指向を学ぶ

JavaScriptでは関数型言語の一部の機能?実践的なJavaScriptの関数型とは。

JavaScriptで関数型プログラミングの入門

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。

JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)