0

在 JavaScript 中，我有一个数组。我push()用来添加数组元素，但是当我操作所述元素时，每个数组元素都会改变，而应该只有一个。我的代码是：

// Arrays to hold the elements that have been created (added to the document).
create.element_array                       = []
create.element_array["name"]               = []
create.element_array["name"]["properties"] = []

var element_properties = 
{
    // Default all to 0.
    borderTopStyle: 0, borderRightStyle: 0, borderBottomStyle: 0, borderLeftStyle: 0,
    borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0, borderLeftWidth: 0, 
    borderTopColor: 0, borderRightColor: 0, borderBottomColor: 0, borderLeftColor: 0,
}

// Testing purposes. These will be added dynamically in production version.
create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push(element_properties);

create.element_array["name"].push("default_body");
create.element_array["name"]["properties"].push(element_properties);

create.element_array["name"].push("default_footer");
create.element_array["name"]["properties"].push(element_properties);

// Evidence that each array element is changed with index manipulation.
create.element_array["name"]["properties"][0].borderTopStyle = "dashed";

console.log(create.element_array["name"]["properties"][0]);
console.log(create.element_array["name"]["properties"][1]);
console.log(create.element_array["name"]["properties"][2]);

我期望的结果是只应更改索引 0，但事实并非如此。上面的 console.log 行将输出以下内容：

Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8
Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8
Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8

borderTopStyle当我明确地将索引 0 定义为唯一被更改的索引时，为什么要为每个元素更改？

4

3 回答 3

2

对象在 javascript 中通过引用传递。毫不夸张的说：

element_properties == create.element_array["name"]["properties"][0] == create.element_array["name"]["properties"][1]

您可以使用 new 运算符或使用不同的对象文字来解决此问题。

于 2012-10-16T21:42:26.070 回答
2

您需要创建 element_properties 对象的新实例。像这样：

var properties_el = Object.create( element_properties );

create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push( properties_el);

目前，您正在插入同一个对象 3 次。另一种选择是使用对象来存储您的属性，如下所示：

create.element_object = {};
create.element_object["name"] = properties_el;

这允许您通过以下方式访问属性

create.element_object["name"]["borderTopStyle"]

或者

create.element_object.name.borderTopStyle

只是一个想法。

于 2012-10-16T21:46:01.043 回答
1

element_properties您正在向数组中的每个点添加对对象的相同引用。这意味着当您尝试更改它时，您正在更改该引用指向的对象的值。

您可能希望改为使用属性对象的构造函数：

function ElementProperties(){
}
ElementProperties.prototype = {
    // Default all to 0.
    borderTopStyle: 0, borderRightStyle: 0, borderBottomStyle: 0, borderLeftStyle: 0,
    borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0, borderLeftWidth: 0, 
    borderTopColor: 0, borderRightColor: 0, borderBottomColor: 0, borderLeftColor: 0,
};

然后，像这样：

create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push(new ElementProperties());
于 2012-10-16T21:41:46.433 回答