JavaScriptの変数のスコープ範囲についての質問

Question

下記のコードを実行すると、obj.val01とobj.val02()で返り値が違って来ます。

obj.val02()にはobj.setting()で設定した値が代入されるのは分かるのですが、何故obj.val01の値は変わらないのでしょうか。

自分でも調べたのですが、イマイチ納得のいく答えにたどり着けませんでした。

この辺りの解説が詳しく書かれているサイトなどを教えていただけると助かります。

var obj = (function(){
	
	var x = 1;
	
	return {
		val01: x,
		val02:function(){
			return x;
		},
		setting:function(y){
			x = y;
		}
	};
})();


obj.setting(10);

console.log(obj.val01); // => 1
console.log(obj.val02()); // => 10

Answer 1

objへの代入式を以下に読み替えれば分かるかと思います。

var x  = 1;
var f1 = function() { return x };
var f2 = function(y) { x = y }; 
var obj = {val01: x, val02: f1, val03: f2};

obj.val01には代入した時点のxの値を代入するのに対し、obj.val02は関数を呼んだ時点のxの値を返します。

まぁ、言ってしまえば

var a = 1;
var b = a;
a = 2;

でbが何故2じゃないのか　というのと同じ理由です。

Comments

[macharu]

回答ありがとうございます。

最初のobjへの代入の時点でobj.val01にはxの値のコピーが渡されているということなのですね。

ちょうどJavaScriptのクロージャについて勉強しているところだったので、複雑に考えすぎていました。

分かりやすい解説ありがとうございました。