JavaScriptの「参照」について

2012/06/25 18:35:29

一体どこへ向かおうとしてるのかわからない感がありますが、サービス作るのは一旦休憩して、あいも変わらずJavaScript道を追い求めております。
JavaScriptを通してプログラミングとは何たるかってのを知り、そこから色々派生していけばいいなぁという感じです、たしか。

というわけで、Pro Javascript Techniquesという本を買いました。
jQueryの作者、John ResigさんによるJavaScriptの参考書。
全編英語のペーパーバックです。
これを読み切った頃には、いっぱしのJavaScripterになれると信じて頑張りますです。

ちょいちょいメモしながら勉強していこうと思ってまして、まずはその一回目。
JavaScript特有の変数の「参照」やらについて。

JavaScriptの参照

変数に格納した値を、別の変数から参照する場合に、元の値をいじくったらどうなるでしょう？シリーズ。

Objectの場合

// Object
var obj1 = {};
var obj2 = obj1;
obj1.a = true;

console.log(obj1, obj2, obj1.a === obj2.a); // true

Arrayの場合

// Array#1
var arr1 = [1,2,3];
var arr2 = arr1;
arr1.push(4);

console.log(arr1, arr2, arr1.length === arr2.length); // true

// Array#2
var arr3 = [1,2,3];
var arr4 = arr3;
arr3 = [4,5,6,7];

console.log(arr3, arr4, arr3.length === arr4.length); // false

Stringの場合

//String
var str1 = 'Str';
var str2 = str1;
str1 += 'ing';

console.log(str1, str2, str1 === str2); // false

挙動の違い

新しい値の代入になるのか、既存のオブジェクトの操作かどうかで挙動が違うんですね。

// 新しい値の代入
var arr3 = [1,2,3];  // arr3はメモリ上の[1,2,3]が格納された場所を参照している。
var arr4 = arr3;     // arr4もメモリ上の[1,2,3]が格納された場所を参照している。(arr3と同じところを参照)
arr3 = [4,5,6,7];    // arr3はメモリ上の[4,5,6,7]が格納された場所を参照するようになる。(arr4とは違うところを参照)

console.log(arr3, arr4, arr3.length === arr4.length); // false

変数への新しい値の「代入」＝変数の持ってた参照先が変わってしまうってこと。

この「参照先」ってイメージが掴めれば、JavaScriptの変数の中身に惑わされることはない感じ。