0

我遇到了一个 JS 对象的问题，其中一个属性值被意外重写。

在下面的示例中，在我设置后css_on['color'] = 'red';，输出css_on到控制台会显示正确的值。不过，之后css_off['color'] = 'blue';，不知为何css_on.color现在也是blue。

有人可以告诉我为什么会这样吗？以及如何阻止它！谢谢。

var css = {
    'line-height':  this.options.height+'px',
    'width':        this.options.label_width+'px'
}
var css_on = css
var css_off = css;

css_on['color'] = 'red';
console.log(css_on);
css_off['color'] = 'blue';
console.log(css_on);
4

4 回答 4

2

css_on 和 css_off 都指向同一个对象。当您更改该对象的属性时，无论您是使用 css_on 还是 css_off 来引用它，更改显然在两种访问它的方式中都是可见的。

如果你想要两个新对象，你可以克隆原始的 css 对象。如果您的首选库中没有克隆函数（或没有库），您可以执行以下简单操作：

var css_on = Object.create(css);
var css_off = Object.create(css);

这将创建两个在其原型链中具有 css 的空对象。当你这样做时：

console.log(css_on['width'])

它将width在 css_on 对象上查找属性。它不会找到它（因为 css_on 是空的），所以它会在原型链中寻找它。它会在 css 对象上找到它，所以它会记录this.options.label_width+'px'

当你这样做

css_on['width'] = '3px';

您将设置 css_on 对象的宽度属性。css 对象或 css_off 对象不受影响，所以它正是你想要的。

于 2013-11-08T09:34:23.803 回答
1

这是因为css_on&都css_off引用了同一个 javascript 对象css。他们没有自己的副本。因此，每当您更改其中一个的任何属性时，它都会反映在另一个上。

于 2013-11-08T09:32:55.510 回答
1

这不是出乎意料的行为，这是您对对象的期望。有很多方法可以处理它，一个简单的方法是https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

例如

var css = {
'line-height':  this.options.height+'px',
'width':        this.options.label_width+'px'
 }

var css_on = Object.create(css);
var css_off = Object.create(css);

不过，并非所有旧版浏览器都支持此功能。因此，如果您需要对 IE8 或更早版本的支持，这将不起作用。这是一个真正的信息线程，它将为您提供很多选项，包括一些更详细的选项（但在旧浏览器中受支持）：如何正确克隆 JavaScript 对象？

于 2013-11-08T09:36:35.877 回答
1

因为css_onandcss_off都引用同一个对象，所以你必须为css_onand创建一个新对象css_off：

var css_on = new Object(css);
var css_off = new Object(css);

现在，它们不同了，您可以更改其中任何一个。

css_on['width'] = '0px';
css_off['width'] = '2px'
console.log(css_on['width'], css_off['width']); // out put: '0px, 2px'
于 2013-11-08T09:43:42.930 回答