Question

我遇到了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);

Answer 1

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'])

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

当你这样做时

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

您将设置css_on对象的width属性。 css对象或css_off对象不会受到影响，因此它正是您想要的。

Answer 2

这是因为css_on和{ css_off引用相同的javascript对象css。他们没有自己的副本。因此，只要您更改其中一个的任何属性，就会反映。

Answer 3

这不是意料之外的行为，而是您应该期待的对象。有很多方法可以处理它，而简单的方法是https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

e.g。

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或更早版本的支持，这将无效。这是一个真正的信息性线程，它将为您提供许多选项，包括一些更冗长的选项（但旧版浏览器支持这些选项）：How do I correctly clone a JavaScript object?

Answer 4

由于css_on和css_off都引用同一个对象，因此您必须为css_on和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'

JS对象属性被意外重写

4 个答案: