更新对象的属性值的行为类似于对另一个对象的属性值的引用

Question

基本上，代码说明了一切。我有一个变量x与css属性。我将所有css的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

的Javascript分配由参考，因此您的x.css做的是一个新的实例当您修改时也会进行修改。您可以使用Object.assign来分配y.css。

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

您正在创建一个对象，然后将两个不同的变量指向同一个对象。最简单的解释是，你只是给变量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：创建一个有它自己的局部特性

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