更新對象的屬性值的行爲類似於對另一個對象的屬性值的引用

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