javascriptの仕様について

Question

javascriptの練習をしていたところ、分からないところがあったので質問します。
下記のコードを実行してコンソールを確認すると、１０回とも同じ数値が出力されます。これは何が原因で起こっている現象なのでしょうか？

###該当のソースコード

window.onload = function(){
    var array = [];
    for(var i = 0; i < 10; i++){
        array[i] = new A ({x:Math.random()*10,y:Math.random()*10});
    }
    for(var i = 0; i < array.length; i++){
        console.log(array[i].a.x);
    }
};

function A(){this.inisialize.apply(this,arguments);}
A.prototype = {
    a : {x:0,y:0},
    inisialize : function(option){
        this.a.x = option.x;
        this.a.y = option.y;
    }
}

###試したこと

this.a.x = option.x;
this.a.y = option.y;

の部分を
this.a = {x:option.x,y:option.y};
にしたところ問題なくランダムな値が出力されました。
しかし理由が分かりません。

Answer 1

this.a.x =でそのまま書き込んでしまうと、プロトタイプに結びついたthis.aのオブジェクトを書き換えることになるので、全部同じ値となります。

this.a =として書き込んだ場合、プロトタイプにあるオブジェクトはそのまま、インスタンスごとにaのオブジェクトが新規作成されるので、インスタンスごとに別な値を持てるようになります。

Comments

[TS627]

ありがとうございました。
よくわかりました。