はじめに
クロージャって何？
クロージャとは、関数内に現れる変数の名前解決が、ローカルスコープだけでなく、関数が定義された場所のスコープも含めて行われる関数のことです。
Perfect PHP
関数の中に関数を書く
クロージャを理解するために、関数の中の関数を使うコードを書いてみます。まずは関数リテラルをそのままreturnする方法。
inner_func1.js
function f() {
return function() {
console.log("Hello!");
return;
};
}
var fn = f();
fn(); //Hello!
fn(); //Hello!
あるいは、こんな風にも書けます。関数リテラル式を変数に入れてからreturnする方法。
inner_func2.js
function f2() {
var inner = function () {
console.log("Yo!");
return;
};
return inner;
}
var fn2 = f2();
fn2(); //Yo!
fn2(); //Yo!
こんな風に書き直すこともできます。関数を一旦定義してから、関数名をreturnする方法。
inner_func3.js
function f3() {
function inner() {
console.log("Hi!");
return;
};
return inner;
}
var fn3 = f3();
fn3(); //Hi!
fn3(); //Hi!
クロージャの例
Perfect JavaScriptのクロージャのサンプルコードです。
sample.js
function f() {
var cnt = 0;
var inner = function() {
return ++cnt;
};
return inner;
}
var fn = f();
console.log(fn()); //1
console.log(fn()); //2
console.log(fn()); //3
cntは関数fの外からは参照できないですが、クロージャ(inner)からは参照することができます。ここまで来ると、冒頭の「クロージャって何？」の意味が分かる気がします。
なお、ここではinner_func2.jsの形式を使って関数を定義しましたが、他の形式でも同様の動作をさせることができます。
二つの関数を入れる
関数fの中に、２つのクロージャを入れることもできます。
double_closure.js
function f() {
var cnt = 0;
var add = function() {
return ++cnt;
};
var sub = function() {
return --cnt;
};
return {add:add, sub:sub};
}
var fn = f();
console.log(fn.add());
console.log(fn.add());
console.log(fn.sub());
console.log(fn.sub());
２つのクロージャから、同じ変数cntを参照できます。
Classっぽく書く
thisを使って、クラスっぽく書くこともできます。
my_class.js
function MyClass() {
this.cnt = 0;
this.add = function() {
return ++this.cnt;
};
this.sub = function() {
return --this.cnt;
};
this.show = function() {
console.log(this.cnt);
};
return this;
}
var fn = MyClass();
console.log(fn.add()); //1
console.log(fn.add()); //2
console.log(fn.sub()); //1
console.log(fn.sub()); //0
// 直接操作できちゃう
fn.cnt = 10;
fn.show(); //10
fn.add();
fn.show(); //11
MyClass内の関数から参照する変数を、this.cntとすれば外部から直接参照可能になります。次のようにローカル変数（var cntで宣言）とすれば外部からは直接参照不可になります。
my_class2.js
function MyClass() {
var cnt = 0;
this.add = function() {
return ++cnt;
};
this.sub = function() {
return --cnt;
};
this.show = function() {
console.log(cnt);
};
return this;
}
var fn = MyClass();
console.log(fn.add()); //1
console.log(fn.add()); //2
console.log(fn.sub()); //1
console.log(fn.sub()); //0
// 直接操作できない
//fn.cnt = 10;
fn.show(); //0
fn.add();
fn.show(); //1
初期値を設定する
fの引数を利用するなどして、クロージャから参照する変数の初期値を与えることもできます。
set_init.js
function f(cnt_init) {
var cnt = cnt_init;
var add = function() {
return ++cnt;
};
var sub = function() {
return --cnt;
};
return {add:add, sub:sub};
}
var fn = f(10);
console.log(fn.add()); //11
console.log(fn.add()); //12
console.log(fn.sub()); //11
console.log(fn.sub()); //10