オブジェクトのプロパティ値の更新は、別のオブジェクトのプロパティ値への参照のように振る舞います。

Question

基本的にコードはすべてを示します。私はcssプロパティを持つ変数xを持っています。 のxをyに保存してから、yのプロパティの値を変更します。この変更はxにも影響します。なぜですか？ xが変更されないように値を渡すだけの方法は？

var x = {}; 
x.css = {height: 100, width: 100}; 

var y = {}; 
y.css = x.css; 
y.css.height = 200; 

console.log(x.css.height); //equals to 200 while it should be 100 

Answer 1

をのしている新しいインスタンスを作成します。変更すると変更されますy.css。代わりにy.cssにObject.assignを割り当てることができます。

var x = {}; 
 
x.css = {height: 100, width: 100}; 
 

 
var y = {}; 
 
y.css = Object.assign({}, x.css); 
 
y.css.height = 200; 
 

 
console.log(x.css.height);

Answer 2

オブジェクトを作成し、同じオブジェクトに2つの異なる変数を指定しています。もっとも簡単な説明は、変数xに別の名前/変数アクセサを与えているということです。下の例を見て、これを克服する方法を見てみるか、オブジェクトのコピーを作成することができます。

解決策1：このトリックを使用してオブジェクトを複製します。

var x = {}; 
 
x.css = {height: 100, width: 100}; 
 

 
var y = JSON.parse(JSON.stringify(x)); 
 
y.css.height = 200; 
 

 
console.log('Y Height:', y.css.height); 
 
console.log('X Height:', x.css.height);

解決策2：それは参照することにより行われ、したがって、あなたのx.cssがあるさJavascriptを割り当て独自のローカルのプロパティに

var elementInstance = function() { 
 
    return { 
 
    css: { 
 
     height: 100, 
 
     width: 100 
 
    } 
 
    } 
 
} 
 

 
var x = new elementInstance(); 
 
var y = new elementInstance(); 
 

 
y.css.height = 200; 
 

 
console.log(x, y); // They should be different instances