需要帮助：奇怪的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);