JavaScript、クロージャーにつきまして

Question

いつもお世話になっております。

function parentFunction(){
 var foo = "foo";
 return function(a){ //無名関数を返す
 	foo = foo + a
 console.log(foo)
 }
}
var nestedFunction  = parentFunction();
 nestedFunction("1") //foo1
var nestedFunction2 = parentFunction();
nestedFunction2("2") //foo2

上記のコードの挙動についての質問です。

nestedFunction2("2") //foo12

となると予想したのですが、なぜそのような挙動にならないのでしょうか？
スコープチェーンは関数定義時に作られる、ということならばnestedFunctionもnestedFunction2も「同じ」変数fooを参照するのでは、と考えた次第です。
分かりにくい質問でしたら申し訳ありません。

よろしくお願いいたします。

Answer 1

JavaScriptでは、関数のローカル変数は実行ごとに別なものとなりますのて、parentFunctionを複数回呼べば、それぞれごとに別のfooが確保されます。

---

ということで、Behemothさんが実現したい動作を行うには、parentFunctionの外側にスコープが必要になります。

var parentFunction = (function(){
  var foo = 'foo';
  function nestedFunction(a) {
    foo = foo + a;
    console.log(foo);
  }
  // 外側では、これがparentFunctionに代入される
  return function() {
    return nestedFunction;
  }
})();

このように、(function(){...})()のような形で、その場で無名関数を作って実行する手法を、「即時呼び出し関数式」（即時関数、IIFE）といいます。

Comments

[Behemoth]

「JavaScriptでは、関数のローカル変数は実行ごとに別なもの」
そうだったのですね。
詳しいご説明、ありがとうございます。
大変勉強になりました。
また、よろしくお願いいたします。

Answer 2

インデントはきちんと直しましょうね。

Behemoth さんが期待した挙動をするのはこちらです。

var foo = "foo";

function parentFunction(){
  return function(a){ //無名関数を返す
    foo = foo + a;
    console.log(foo);
  }
}

var f1  = parentFunction();
f1("1") //foo1
var f2 = parentFunction();
f2("2") //foo12

関数の外部にある参照にアクセスしているのがわかるでしょうか？
関数の内部に var foo で変数を作ると、関数呼び出しのタイミングで初期化されるので全く違う参照になります。

Comments

[maisumakun]

fooが外から見えるとなると、クロージャとしてはちょっと物足りない感じはありますね…

[mather]

おっしゃるとおり、これはクロージャーではないですね。

[Behemoth]

matherさん

ご解説ありがとうございます。
関数の理解が少し深まったように思います。
また、よろしくお願いいたします。