需要幫助：奇怪的JavaScript行爲......當另一個變量被設置時，一個變量被更改

Question

抱歉想不到更好的標題。 :)

這裏去，

我一直在拉我的頭髮幾個小時試圖弄清楚這一點。

我有以下功能：

function changeCss(elem, styles) { 

    var oldstyles = styles; 

    elem.css(styles) 

    for(var key in styles){ 
     var oldstyle = input.css(key); 
    oldstyles[key] = oldstyle;    //this line is the issue 
     elem.data('oldstyle', oldstyles)      
    } 
} 

這裏是它如何被稱爲一個例子：

var theStyle = { border: '1px solid red'}; 
//elem is a jQuery object of an HTML element 

changeCss(elem, thestyle); 

的問題是，所述註釋行（第8行）後，styles的值是什麼oldstyles的值是。

因此，舉例來說，如果沒有設置邊框特定元素的CSS屬性，即不確定，styles的價值將是{ border: "" }

這怎麼可能呢？這就是爲什麼我正在剔除oldstyles;我正在做一個styles變量的「備份」。

我改變了第三行var oldstyles = {};，它似乎工作正常。

但是，這不是它應該如何，我需要有舊的風格，因爲後來我想重置樣式 - 但只有我改變了。

我不明白爲什麼它「破」oldstyles等於styles？

我希望我給你足夠的代碼讓你理解，並且我正在把自己擴展得足夠好。 :)

如果有什麼不清楚的地方，請詢問。

謝謝你的任何見解和幫助。

Answer 1

這是因爲oldstyles實際上只是對樣式而不是副本的引用。因爲它似乎你正在使用jQuery你可以使用jQuery.extend使添加oldStyles風格的副本：

var oldstyles = {}; 
jQuery.extend(oldstyles, styles); 

Answer 2

JavaScript對象由參考通過。這意味着，在行var oldstyles = styles;。您正在創建一個引用與styles相同的值的新變量。

爲了創建一個重複的，你需要做的是：

var oldstyles = {}; 
for (var style in oldstyles) { 
    if (oldstyles.hasOwnProperty(style)) { 
    oldstyles[style] = styles[style]; 
    } 
} 

在jQuery中，你可以使用$.extend()：

var oldstyles = $.extend({}, styles);