今回はオブジェクトについて書いていきます。
このあたりからややこしくなってくる内容なので、ちょっとずつ理解していきましょう。
■値を持っている変数と参照している変数
早速タイトルからややこしいですね。
なんとなく雰囲気を一回つかめればわかるのですが、
わかるまではなかなかしんどいこの２つです。
このあたりがいい加減でもコードはかけますが、
ちょっと問題にあたったときになんのこっちゃかわからくなってしまうので、早いうちに理解してしまいましょう。
変数には値を代入できます。
また、オブジェクトも代入ができます。
オブジェクトというのは{a:2, b:3}のようなプロパティの集合でした。
この２つの代入。同じように見えて結構動きが異なります。
例を示します。
まずは変数に値を代入してみます。
var a = 10; //aに10を代入
var b = a; //bにaを代入
b = 20; //ここでbに20を代入
上の状態でこのようにそれぞれを出力したらどうなるでしょうか。
document.write(a);
document.write(b);
まぁ、なんとなく
document.write(a); →10が出力される
document.write(b); →20が出力される
ということがわかると思います。
では今度は変数にオブジェクトを代入してみます。
var a = {x:10, y:20}; //オブジェクトをaに代入
var b = a; //bにaを代入
b.x = 30; //bに持っているオブジェクトのxのプロパティ値を30にする。
上の状態でこのようにそれぞれを出力したらどうなるでしょうか。
document.write(a.x);
document.write(b.x);
この場合
document.write(a.x); →30が出力される
document.write(b.x); →30が出力される
になります。
「変数aのオブジェクトのプロパティはなにもいじっていないのに、なぜ書き換わった？」って思うのは当然です。
これが見だしの
値を持っている変数と参照している変数
につながってきます。
Javaのインスタンス化されたクラスみたいな話と同じです。よく箱でたとえられるやつですね。
【値の代入の場合、変数には値がそのまま保持されます。】
そのため、b = aとbにaを代入しても、aが保持している10という値自体がbに代入されます。
一方、
【オブジェクトの代入の場合、変数には値ではなくオブジェクトの座標が保持されます。】
座標ってなんじゃ！って思うかもしれません。
a = {x:10, y:20};
と書いた場合、プログラムのどこかの空間に
{x:10, y:20}
という箱ができます。
でaが保持しているのはその箱の場所を保持しているわけです。{x:10, y:20}自体はaは保持していません。
これが参照している変数というものです。
b = aで行われるのは、{x:10, y:20}の引渡しではなく、その箱の場所の情報です。
そのため、b = aと代入した段階で、aとbは同じオブジェクトを参照することになります。
その後にbがb.x = 30; とプロパティ値を書き換えました。
変数aも同じものを参照しているので、
document.write(a.x); →30が出力される
document.write(b.x); →30が出力される
となるわけです。
次回以降ももう少しこのあたりの内容について記載していきます。
ではではー
コメント