0

JavaScriptでは配列があります。配列要素を追加するために使用push()していますが、上記の要素を操作すると、各配列要素が変更されますが、1つだけが変更されます。私のコードは次のとおりです。

// 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["名前"]["プロパティ"][0] == create.element_array["名前"]["プロパティ"][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 に答える